Создать элемент шаблона / фрагмент документа из полной разметки HTML - PullRequest
Новая
       1

Создать элемент шаблона / фрагмент документа из полной разметки HTML

0 голосов
/ 25 ноября 2018

Невозможно создать элемент шаблона и проанализировать с ним разметку полного HTML-документа. 

const template = document.createElement('template');
template.insertAdjacentHTML('beforeend', '<html></html>');

Этот фрагмент даст DocumentFragment [].Использование полной разметки дает только все элементы ниже элемента head или body.Другими словами: элементы html, head и body извлекаются из фрагмента документа.

Это неожиданно, состояния MDN :

Разрешенный контент: без ограничений

Ниже приведен обходной путь для этой проблемы.htmlElement содержит то, что, как я ожидал, template.content будет содержать при подаче полной разметки. 

const htmlElement = document.createElement('html');

const headElement = document.createElement('head');
headElement.insertAdjacentHTML('beforeend', headMarkup);
htmlElement.appendChild(headElement);

const bodyElement = document.createElement('body');
bodyElement.insertAdjacentHTML('beforeend', bodyMarkup);
htmlElement.appendChild(bodyElement);

Можно ли каким-либо образом создать фрагмент / элемент документа, содержащий полный документ, который не прикреплен кDOM?

Примечание. Мой вариант использования - присоединение теневого DOM, содержащего полный HTML-документ, к узлу существующего документа.

1 Ответ

0 голосов
/ 25 ноября 2018

Одним из возможных решений является интерфейс DOMParser. 

const htmlMarkup = `
  <!DOCTYPE html>
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
      <h1>Hello</h1>
    </body>
  </html>
`;

const parser = new DOMParser();
const doc = parser.parseFromString(htmlMarkup, 'text/html');

const shadowHost = document.querySelector('.shadow-host');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
shadowRoot.appendChild(doc.documentElement);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...