Question

似乎无法创建模板元素并使用它来解析完整HTML文档的标记。

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

此代码段将产生DocumentFragment []。仅使用完整标记会产生head或body元素下方的所有元素。换句话说：html，head和body元素已从文档片段中剥离。

这是意外的，MDN states：

允许的内容：没有限制

以下是解决此问题的方法。 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的完整文档的文档片段/元素？

注意：我的用例是将包含完整HTML文档的影子DOM附加到现有文档的节点上。

Answer 1

一种可能的解决方案是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);

从完整的HTML标记创建模板元素/文档片段

1 个答案: