render: styling concern about hybrids HOT 6 CLOSED

The only limitation for now with styling is related to the shadycss project. if you want to support all major browsers, you have to use it. In the Browser Support section I added a link to web components shims limitations. Here you have links to topics I think you are interested in:

• :host selector limitations: https://github.com/webcomponents/webcomponentsjs#shadycss-hostzotnotbarnth-child2-doesnt-work-
• <slot> styling limitations: https://github.com/webcomponents/shadycss#selector-scoping

Moreover, there is yet another type of limitation related to html module of the hybrids library (I will add this to the README soon). ShadyCSS is moving out the style element from DOM, to make possible CSS encapsulation. If you use expression inside of the <style> element, with ShadyCSS applied, it doesn't work and breaks templates.

const MyElement = {
  color: 'black',
  render: ({ color }) => html`
     <style>:host { color: ${color}; }</style>
     ...
  `,

It is a powerful concept to create more complex dynamic styles, but it actually works only in Chrome and Safari (with native Shadow DOM). However, it is also not efficient (as the browser has to recalculate styles for element instance, not a family of elements).

Please, tell me if I can help you more with this subject.

from hybrids.

It might be a good idea :) so after style attribute I will add an example with static style element as a different solution for styling.

I knew that in Firefox web components are available behind flags, but when I checked issues, there was some bugs there. It's great news, that they are going to ship it finally! 🎉

from hybrids.

Yes i know about the ShadyCSS limitations (i use it everydays with polymer 2/3). Sorry if my first issue was not clear. My concern was about telling users that inline styles (as the readme file shows) is not a best practices for Web Components, that is a react-ish CSS-in-JS solution ...not required here. I think that "pushing" a native solutions (without polyfills) is better that telling to use inline style..

BTW, i tested with the latest Firefox that introduce web components support and all works as expected.

from hybrids.

In the case of styling the library provides all available possibilities, including inline styling and creating static CSS in style elements. It should stays like this. One can say that inline styling is better, another opposite. It is up to the user of the library.

However, I will definitely add notice about expressions inside of the style element, as they just don't work with ShadyCSS shim.

BTW, i tested with the latest Firefox that introduce web components support and all works as expected.

What version of Firefox did you use?

from hybrids.

One can say that inline styling is better, another opposite. It is up to the user of the library.

You right, but maybe adding an example with <style></style> can help people knowing the library possibilities

What version of Firefox did you use?

Firefox Nightly (62.0a1) and Developer Edition (61)

Since Firefox will completely support Web Components and Shadow Dom from v62 (v61 will support custom elements) you can already enable the flags in the about:config page, just search for webcomponents. You can test almost everything.

from hybrids.

@equinusocio I opened PR #7, so you might want to check it. Please comment in PR if there is something, that could be written better.

from hybrids.