Question

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

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

当然，如果模板在样式标记中包含css规则，那么它们也将被复制。因此，我们可以使用属于Web组件内部标记的范围样式。

问题：

当我创造大量的时候，它是否有任何性能影响风格就是这样的Web组件的实例复制而不是重复使用？
有没有办法在多个实例之间共享样式节点相同的网络组件？

Answer 1

它是否有任何性能影响......？

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

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

是的，您可以使用@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组件之间共享样式＆＃34;

1 个答案: