Повторное использование элементов SVG в разных теневых DOM. ⇐ Html

[Anonymous]

У меня есть много экземпляров пользовательского элемента, использующего Shadow DOM. В их тени DOM находится элемент , который должен отображать одни и те же фигуры с одинаковыми фильтрами для каждого экземпляра пользовательского элемента.
Чтобы повысить производительность и простоту, я хотел бы определить эти формы и фильтры только один раз и повторно использовать их в каждом элементе SVG. Я пытался определить их в основном документе, но теневые DOM, похоже, не имеют к ним доступа.
Как я могу их повторно использовать? Я не могу включить их из отдельного файла, так как мне нужно манипулировать фигурами и фильтрами через JavaScript.
Нерабочий пример:

Код: Выделить всё

const svg = document.getElementById('prototype').innerHTML;

// placing the  within #regular
document.getElementById('regular').innerHTML = svg;

// placing the  within the Shadow DOM of #shadow
const host = document.getElementById('shadow');
const root = host.attachShadow({ mode: 'open' });
root.innerHTML = svg;

Код: Выделить всё

div {border: 1px solid; display: inline-block;}

Код: Выделить всё

HI


Within the document:
Within a shadow DOM:

Подробнее здесь: https://stackoverflow.com/questions/798 ... hadow-doms