跨 Web 组件共享样式 "of the same type"

Question

如果我没理解错的话，创建 Web 组件的实例可以概括为创建影子根并复制标记，例如从模板到它：

var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);

当然，如果模板在样式标签中包含 css 规则，这些规则也会被复制。因此，我们可以拥有属于 Web 组件内部标记的作用域样式。

问题：

当我创建大量时，它对性能有影响吗？完全相同的 Web 组件的实例，因为样式只是复制但未重复使用？
有没有办法跨多个实例共享样式节点相同的网络组件？

Answer 1

Does it have any performance implications...?

是的，这取决于有多少实例，以及浏览器中实现的 CSS 引擎。您必须测试每个用例并考虑速度与内存消耗。

Is there a way to share the style node across multiple instances of the same web component?

是的，您可以使用 @import url like in this SO question。或者您可以选择不使用 Shadow DOM 并仅使用全局 CSS 样式。

2019更新

正如 Harshal Patil 所建议的那样，由于 Chrome 73 和 Opera 60，多个 Shadow DOM 可以采用相同的样式表。这样，样式表中的更新将应用于所有 Web 组件。

let css = new CSSStyleSheet
css.replaceSync( `div { color: red }` )

customElements.define( 'web-comp', class extends HTMLElement {
    constructor() {
        super()
        let shadow = this.attachShadow( { mode: 'open' } )
        shadow.innerHTML = `<div><slot></slot></div>`
        shadow.adoptedStyleSheets = [ css ]
    }
} )
color.oninput = () => css.replaceSync( `div { color: ${color.value} }` )

<web-comp>Hello</web-comp>
<web-comp>World</web-comp>
<input value=red id=color>

跨 Web 组件共享样式 "of the same type"

Share style across web components "of the same type"

html

web-component

shadow-dom

html5-template

html-imports