Scoped CSS

[fruitbang]

I want to ask is it still possible to use Scoped CSS in hybrids? I can't use ShadowDom, cuz such libraries as "pdfmake", don't have the ability to go into the shadows, and for that I would like to use this extremely useful feature.

[smalluban]

You can do anything, which is valid HTML code in your template. You are not force to use css helper method for styling, you can use ordinary <style> element, etc..

render: {
  value: () => html`
    <div>...</div>
    <style>....</style>
  `,
  shadow: false,
}

However, I am not sure what kinds of scoped CSS you mean. Do you want to use new @scope rule? https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

[fruitbang]

yeah that's it! But, I thought it was implemented as an additional option in hybrids earlier. Unfortunately, skoped css is not natively supported by all browsers yet. Maybe it can be added again so that it works like in vue.js https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

[smalluban]

There is built-in layout engine, which works without the Shadow DOM. You can check it out, but it focuses on "layout" CSS rules.

However, if you are forced to put something in Light DOM, you can still create other parts using Shadow DOM.

Hybrids v9 detects automatically if Shadow DOM should be used, and only turns it on if it's required (slot element, or styles). Usually, it's not needed.

[Qsppl]

What he means is that VueJS implements scoped-css by adding a hash unique to that component to each element in a component, as well as the same hash to each selector declared in the component:

I was unable to reproduce this behavior on hybrids: example

CSS scope is not yet supported by browsers.

[smalluban]

The layout engine is doing exactly that - it takes CSS properties, creates a unique class, and applies it to the element with layout="..." attribute. However, by the design, it only focuses on layout properties, as everything else should be defined in its own UI elements (using classical CSS), or by the additional styles in the main template (where layout is being used). The main goal here is to avoid a lot of structural CSS, which is usually unique to each view (not repeatable, as then it should be included in one UI element).

I am not sure if there is anything else we can help you with the issue. I encourage you to use selectively Shadow DOM, where it is possible - as you don't have to do it everywhere - all of the browsers support it.

[smalluban]

I explained possible ways to scope CSS using internal tools of the framework. However, @fruitbang feel free to re-open if you need more guidance.