Поделиться стилем через веб-компоненты "одного типа"

Question

Если я правильно понимаю, создание экземпляра веб-компонента можно описать как создание теневого корня и копирование разметки, например, из шаблона в него:

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

Конечно, если шаблон содержит правила CSS в теге стиля, они также будут скопированы. Таким образом, мы можем иметь стили с областью видимости, которые принадлежат внутренней разметке веб-компонента.

Вопросы:

1. Имеет ли это какое-либо влияние на производительность, когда я создаю тонны экземпляров одного и того же веб-компонента, так как стиль просто копируется и не используется повторно?
2. Есть ли способ поделиться узлом стиля между несколькими экземплярами одного и того же веб-компонента?

Answer 1

Есть ли какие-либо последствия для производительности...?

Да, это зависит от того, сколько экземпляров и от движка CSS, реализованного в браузере. Вам придется тестировать каждый вариант использования и учитывать скорость и потребление памяти.

Есть ли способ поделиться узлом стиля между несколькими экземплярами одного и того же веб-компонента?

Да, вы можете использовать @import url как в этом вопросе. Или вы можете не использовать Shadow DOM и использовать только глобальный стиль CSS.