Определение теневого шаблона DOM в javascript

Question

Я создаю элемент с тенью dom, в конечном итоге для использования в пользовательском элементе. Мой HTML-файл уже немного раздутый, поэтому я бы идеально хотел переместить все мои шаблоны в скрипт java, а не ссылаться на шаблоны в теле моего html.

Я попробовал этот подход для этого:

var template = document.createElement('template'), 
    div = document.createElement('div'); 

div.textContent = 'foo'; 
template.appendChild(div); 

var shadow = document.body.appendChild('div').createShadowRoot(); 

shadow.appendChild(template.content.cloneNode()); 

Однако, это бросает NotFoundError. Копая глубже, похоже, что template.content определяется как #documentFragment, что кажется, что это может быть проблемой, но я не знаю достаточно о теневом dom или шаблонах, чтобы сказать наверняка.

Есть ли ошибка в моем коде или лучший способ создания шаблонов в javascript?

Here is my test fiddle.

Answer 1

Во-первых, этот вызов является недействительным:

document.body.appendChild('div') 

Вам нужен регулярный элемент в DOM, для того, чтобы смонтировать тени DOM:

var mountingPoint = document.createElement('div'); 
document.body.appendChild(mountingPoint); 

<template> является элемент, который содержит фрагмент документа с именем content:

Этот интерфейс также очень полезен с веб-компонентами: < шаблон > элементов содержит DocumentFragment в свойстве HTMLTemplateElement.content. (Source: MDN)

Таким образом, вы могли бы заменить template.appendChild(div); с:

template.content.appendChild(div); 

Также отметим, что с Chrome, первым параметром deep метода cloneNode должен быть true потому default is false.

template.content.cloneNode(true); 

Но вам не нужен <template> элемент. Используйте созданный DIV напрямую:

var div = document.createElement('div'); 
div.textContent = 'foo'; 

var mountingPoint = document.createElement('div'); 
document.body.appendChild(mountingPoint); 

var shadow = mountingPoint.createShadowRoot(); 
shadow.appendChild(div);