Увеличение тега SVG с теневым DOM

я экспериментировал с HTML5 и SVG; и я очень новичок в JavaScript и веб-разработке, поэтому, вероятно, что-то мне не хватает. Я пытаюсь создать многоразовые веб-компоненты, используя некоторые из новых функций, таких как импорт HTML, теневой DOM и расширение существующих веб-элементов. У меня есть два HTML-файла:

7
html5 javascript shadow-dom svg web-component

2 ответов

вы не можете этого сделать, поскольку svg не может быть тенью хозяина. Только ограниченное количество элементов может быть тенью хозяина:

article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, header, main, nav, p, section, span.

не только svg, но и другие подобные input или textarea не может иметь shadow-doms (я говорю о Shadow-DOM v1).

определение attachShadow для деталей:https://dom.spec.whatwg.org/#dom-element-attachshadow

обратите внимание также, что:

  • SVGSVGElement не реализует HTMLElement.
  • также слышал что-то о SVG, уже содержащем shadow-dom в их реализации, и с пользовательскими элементами v1 у вас может быть только одна тень-dom (см. здесь: http://hayato.io/2016/shadowdomv1/).

почему бы вам не создать вместо этого обычный пользовательский элемент, который может содержать <svg> элементы внутри его shadow-dom?

3

это потому, что в своем <template>, the <rect> элемент не находится внутри <svg> тег, поэтому он не распознается как SVGRectElement, а как .

чтобы заставить его работать, просто добавьте <svg> tag around:

<template id="tank">
    <svg>
        <rect fill="red" width="50" height="50"></rect>
    </svg>
</template>

теперь вы можете импортировать элемент с помощью importNode() или cloneNode():

//Works
var rect = tankElement.content.querySelector('rect').cloneNode();
root.appendChild(rect);

обновление импорт элементов MUTLIPLE SVG

поставить элементы в <g>:

<template id="tank">
    <svg>
        <g>
            <rect fill="red" width="50" height="50"></rect>
            <rect fill="blue" width="25" height="50"></rect>
        </g>
    </svg>
</template>

клон <g> С его содержанием:

var g = tankElement.content.querySelector('g').cloneNode(true);
root.appendChild(g);
2