横跨“相同类型的” web组件共享风格

Question

如果我理解正确，创建Web组件的一个实例可以概括为创造一个影子根，从模板复制标记，如到其中：

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

当然，如果模板中包含的风格标签的CSS规则，这些都将被复制为好。因此，我们可以有属于一个网络组件的内部标记范围的样式。

问题：

1. 是否有任何性能问题，当我创建万吨非常相同的Web组件的实例，作为样式只是复制，而不是重复使用？
2. 是否有要共享相同的Web组件的多个实例的风格节点的方法吗？

Answer 1

它对性能有没有影响...？

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

有没有一种方法可以在同一Web组件的多个实例之间共享样式节点？

是的，您可以@import url 在此SO问题中使用。或者你也可以选择不使用阴影DOM和只使用全局CSS样式。

2019更新

作为Harshal帕蒂尔建议，因为Chrome浏览器73和Opera 60是可能的多重阴影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>