Custom elements: share component styles via adoptedStyleSheets

[thijmenp]

Description

When an SFC is used through defineCustomElement, Vue writes its styles into every element instance as <style> tags (_applyStyles). Since 3.5 the same applies to child components: _injectChildStyle adds one <style> per child component per element.

For custom elements that appear many times on a page, this means the same CSS text is duplicated in every shadow root, as separate <style> elements and stylesheet objects. A form with x amount <my-checkbox> elements gets x copies of the checkbox styles.

Constructable stylesheets (new CSSStyleSheet() + shadowRoot.adoptedStyleSheets) solve exactly this: one sheet per component definition, shared by every shadow root. They are supported in all evergreen browsers.

Proposal

An opt-in option on defineCustomElement, for example styleMode: 'adopted', with the current <style> tag behaviour remaining the default.

[thijmenp]

Considered the fact that this is a feature request i created #16180