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

Question

如果我正确理解它，则可以将Web组件的实例求和为创建阴影根并复制标记，例如从模板中：

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

当然，如果模板在样式标签中包含CSS规则，则将复制这些规则。因此，我们可以拥有属于Web组件的内部标记的范围样式。

问题：

1. 当我创建大量时，它是否具有任何性能同一Web组件的实例，因为样式只是复制而不重复使用？
2. 是否有一种方法可以在多个实例中共享样式节点相同的Web组件？

Answer 1

它有任何性能的影响...？

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

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

是的，您可以在此问题中使用@import url。或者，您可以选择不使用Shadow dom并仅使用全局CSS样式。

2019 Update

正如Harshal Patil所建议的那样，由于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>