在“相同类型”的Web组件之间共享样式。 [英] Share style across web components "of the same type"

问题描述

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

If I understand it correctly, creating an instance of a web component can be summed up as creating a shadow root and copying the markup, e.g. from a template into it:

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

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

Of course, if the template contains css rules in a style-tag, those will be copied as well. Thus we can have scoped styles which belong to the internal markup of a web component.

问题：

1. 当我创建大量同一个Web组件的
   实例时，它是否会产生任何性能影响，因为样式只是
   复制而不是重复使用？


2. 有没有办法在
   的多个实例之间共享样式节点？

推荐答案

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

Does it have any performance implications...?

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

Yes, it depends on how many instances, and on the CSS engine implemented in the browser. You'll have to test every use case and take in account speed versus memory consumption.

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

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

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

Yes, you can use @import url like in this SO question. Or you can choose to not use Shadow DOM and use global CSS style only.

这篇关于在“相同类型”的Web组件之间共享样式。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！