Create template element/document fragment from full HTML markup

It doesn’t seem possible to create a template element and parse the markup of a complete HTML document with it.

const template = document.createElement('template');

template.insertAdjacentHTML('beforeend', '<html></html>');

This snippet will yield DocumentFragment . Using the full markup only yields all elements below the head or body element. In other words: The html, head, and body elements are stripped from the document fragment.

This is unexpected, MDN states:

Permitted content: No restrictions

The following is a workaround for this problem. htmlElement contains what I expected template.content to contain when feeding it the full markup.

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);

Is there any way I can create a document fragment/element containing a full document that is not attached to the DOM?

Note: My use case is attaching a shadow DOM containing a full HTML document to a node of an existing document.

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

createElement doesn't create the element to the DOM, until it's appended/inserted to the DOM.

– Teemu
Nov 25 '18 at 13:11

@Teemu createElement indeed doesn’t insert a document fragment in the DOM; however, that’s not the point of the question. I tried to create a document fragment with createElement but it didn’t work as I expected.

– kleinfreund
Feb 28 at 13:22

add a comment |

It doesn’t seem possible to create a template element and parse the markup of a complete HTML document with it.

const template = document.createElement('template');

template.insertAdjacentHTML('beforeend', '<html></html>');

This is unexpected, MDN states:

Permitted content: No restrictions

The following is a workaround for this problem. htmlElement contains what I expected template.content to contain when feeding it the full markup.

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);

Is there any way I can create a document fragment/element containing a full document that is not attached to the DOM?

Note: My use case is attaching a shadow DOM containing a full HTML document to a node of an existing document.

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

createElement doesn't create the element to the DOM, until it's appended/inserted to the DOM.

– Teemu
Nov 25 '18 at 13:11

@Teemu createElement indeed doesn’t insert a document fragment in the DOM; however, that’s not the point of the question. I tried to create a document fragment with createElement but it didn’t work as I expected.

– kleinfreund
Feb 28 at 13:22

add a comment |

It doesn’t seem possible to create a template element and parse the markup of a complete HTML document with it.

const template = document.createElement('template');

template.insertAdjacentHTML('beforeend', '<html></html>');

This is unexpected, MDN states:

Permitted content: No restrictions

The following is a workaround for this problem. htmlElement contains what I expected template.content to contain when feeding it the full markup.

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);

Is there any way I can create a document fragment/element containing a full document that is not attached to the DOM?

Note: My use case is attaching a shadow DOM containing a full HTML document to a node of an existing document.

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

It doesn’t seem possible to create a template element and parse the markup of a complete HTML document with it.

const template = document.createElement('template');

template.insertAdjacentHTML('beforeend', '<html></html>');

This is unexpected, MDN states:

Permitted content: No restrictions

The following is a workaround for this problem. htmlElement contains what I expected template.content to contain when feeding it the full markup.

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);

Is there any way I can create a document fragment/element containing a full document that is not attached to the DOM?

Note: My use case is attaching a shadow DOM containing a full HTML document to a node of an existing document.

javascript dom

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

asked Nov 25 '18 at 12:51

kleinfreund

4,43832151

createElement doesn't create the element to the DOM, until it's appended/inserted to the DOM.

– Teemu
Nov 25 '18 at 13:11

@Teemu createElement indeed doesn’t insert a document fragment in the DOM; however, that’s not the point of the question. I tried to create a document fragment with createElement but it didn’t work as I expected.

– kleinfreund
Feb 28 at 13:22

add a comment |

createElement doesn't create the element to the DOM, until it's appended/inserted to the DOM.

– Teemu
Nov 25 '18 at 13:11

@Teemu createElement indeed doesn’t insert a document fragment in the DOM; however, that’s not the point of the question. I tried to create a document fragment with createElement but it didn’t work as I expected.

– kleinfreund
Feb 28 at 13:22

createElement doesn't create the element to the DOM, until it's appended/inserted to the DOM.

– Teemu
Nov 25 '18 at 13:11

@Teemu createElement indeed doesn’t insert a document fragment in the DOM; however, that’s not the point of the question. I tried to create a document fragment with createElement but it didn’t work as I expected.

– kleinfreund
Feb 28 at 13:22

add a comment |

1 Answer
1

active

oldest

votes

One possible solution is the DOMParser interface.

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);

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467609%2fcreate-template-element-document-fragment-from-full-html-markup%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

One possible solution is the DOMParser interface.

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);

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

add a comment |

One possible solution is the DOMParser interface.

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);

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

add a comment |

One possible solution is the DOMParser interface.

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);

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

One possible solution is the DOMParser interface.

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);

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

answered Nov 25 '18 at 17:07

kleinfreund

4,43832151

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg