feat: Add support for shadowDom.adoptedStylesheets

[Arvind6353]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Hi Team,

Add support for shadowDom.adoptedStylesheets

https://wicg.github.io/construct-stylesheets/

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.adoptedStyleSheets = [myElementSheet];

This gives an option to avoid duplicating css .

Describe the Use Case

In stencil, css is used as a string inside each component bundle. For css that gets reused across components, this css string is repeated in each component.

Using the https://wicg.github.io/construct-stylesheets/ approach , we can avoid duplicating the css if multiple components reuse some css.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[dmartinjs]

I think it's already the case 🤔

For example, the CSS of my component rendered in shadowDOM
is showing constructed stylesheet in the devtools.

more explanation about the information in chrome DevTools: https://developer.chrome.com/blog/css-in-js/

[johnjenkins]

it's only a string in dev / unsupported browsers. In a prod build, it'll use constructed stylesheets

[Arvind6353]

@johnjenkins @dmartinjs Thank you. I could see thats the case in the prod build. I was looking at the dev build.

https://wicg.github.io/construct-stylesheets/

Its working fine in Chrome browser. I suppose it is not supported yet in firefox. Do we have any pollyfills for that ?