Using a CSS framework about hybrids

[waspeer]

Thanks!

[smalluban]

Hi @waspeer!

CSS encapsulation is related to how the Shadow DOM works. The hybrids render factory uses it by default - and for a good reason. Each web component is independent by design, and it should be possible to use it regardless of parent elements, etc.. The Shadow DOM gives the developer freedom of using CSS selectors as he wants to, as styles defined inside of the element are not shared with the outside tree and vice versa (there is also very important DOM distribution feature, but it is not the case here).

I encourage you to read more about Shadow DOM. I can recommend you this article - https://developers.google.com/web/fundamentals/web-components/shadowdom. Look closely at the Styling and Resetting inheritable styles (selectors are not shared, but Shadow DOM is not an absolute boundary - inherited properties are propagated into the shadowRoot).

In the hybrids, you have a few options to share styles. You mentioned about style helper. It is useful if you want to write styles in .css files, or have it from the external library. If it is your case to use Bootstrap or something else library, you should know that they weren't built for web components. However, we can create a web component version of it. If your CSS framework uses classes, in the web components world, they should be separate components:

<!-- the default usage with global CSS file -->
<h1 class="title"></h1>
<a class="button"></a>

<!-- WC implementation - styles inside of the elements -->
<my-h1></my-h1>
<my-button></my-button>

All base "CSS components" should be reflected with web component versions rather than used as classes imported in each web component (as the whole library).

Although, if you are only the "consumer" of the library, I think it is normal, that you can import styles, which you need in the specific web component, and use it.

To sum up - WCs are those building blocks, which are elements with classes from CSS frameworks. Instead of creating "big" views with those styles, in WC world you use small one-purpose components with styles related to the specific use case. The hybrids library is an excellent choice because it is super easy to write WC, which just renders element:

// Title element without inputs (reflects "title" class from some CSS framework)
import titleStyles from 'css-framework/styles/title.css';

export default {
  render: () =>  html`<h1 class="title"><slot></slot></h1>`.style(titleStyles),
}

[waspeer]

Right! Thanks for the clear answer. Just thinking aloud here; say I would make such a library of styled components based on a css framework, does Hybrids provide the possibility to export those components as standalone components without a dependency of Hybrids?

…

-- Wannes Salomé Op 15 september 2019 om 17:15:12, Dominik Lubański ([email protected](mailto:[email protected])) schreef:

Hi @waspeer(https://github.com/waspeer)! CSS encapsulation is related to how the Shadow DOM works. The hybrids render factory uses it by default - and for a good reason. Each web component is independent by design, and it should be possible to use it regardless of parent elements, etc.. The Shadow DOM gives the developer freedom of using CSS selectors as he wants to, as styles defined inside of the element are not shared with the outside tree and vice versa (there is also very important DOM distribution feature, but it is not the case here). I encourage you to read more about Shadow DOM. I can recommend you this article - https://developers.google.com/web/fundamentals/web-components/shadowdom. Look closely at the Styling(https://developers.google.com/web/fundamentals/web-components/shadowdom#styling) and Resetting inheritable styles(https://developers.google.com/web/fundamentals/web-components/shadowdom#reset) (selectors are not shared, but Shadow DOM is not an absolute boundary - inherited properties are propagated into the shadowRoot). In the hybrids, you have a few options to share styles. You mentioned about style helper. It is useful if you want to write styles in .css files, or have it from the external library. If it is your case to use Bootstrap or something else library, you should know that they weren't built for web components. However, we can create a web component version of it. If your CSS framework uses classes, in the web components world, they should be separate components: <!-- the default usage with global CSS file --> <h1 class="title"></h1> <a class="button"></a> <!-- WC implementation - styles inside of the elements --> <my-h1></my-h1> <my-button></my-button> All base "CSS components" should be reflected with web component versions rather than used as classes imported in each web component (as the whole library). Although, if you are only the "consumer" of the library, I think it is normal, that you can import styles, which you need in the specific web component, and use it. To sum up - WCs are those building blocks, which are elements with classes from CSS frameworks. Instead of creating "big" views with those styles, in WC world you use small one-purpose components with styles related to the specific use case. The hybrids library is an excellent choice because it is super easy to write WC, which just renders element: // Title element without inputs (reflects "title" class from some CSS framework) import titleStyles from 'css-framework/styles/title.css'; export default { render: () => html`<h1 class="title"><slot></slot></h1>`.style(titleStyles), } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub(#65?email_source=notifications&email_token=AC2LK45BBKXCC6KPZQH5QPTQJZGQBA5CNFSM4IWYTDD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6XSZNQ#issuecomment-531573942), or mute the thread(https://github.com/notifications/unsubscribe-auth/AC2LK42FBZXGH3DOKTQMHILQJZGQBANCNFSM4IWYTDDQ).

[smalluban]

Yes, it is possible, but the standard in the community is creating npm packages with dependencies rather than including them into the provided code. You can create a project, where you have two targets:

• npm package with hybrids as a dependency
• built version for standalone usage (like dist/hybrids.js version of the hybrids)

There is also one important choice - do you want to define elements in the source code (call customElements.define(...)) or export definitions for the user. The second option using hybrids will force users to use hybrids to define them, the first one does not give choice about naming (which is now global). What I can see, libraries, for now, use the first option.