теги html и body внутри тега шаблона - PullRequest
Новая
       3

теги html и body внутри тега шаблона

0 голосов
/ 06 октября 2018

У меня есть пользовательский элемент, и я хотел бы заполнить его DOM из тега шаблона.Кажется, что все вставлено в пользовательский элемент, кроме html и тегов body.Означает ли это, что теги html и body не разрешены внутри пользовательских элементов?Вот мой код 

<template id="legacy-code-template">
<style>
  body {
    background:red;
  }
</style>
<html><body><p>Sample text</p></body></html>
</template>
<legacy-code></legacy-code>
<script>
    class LegacyCode extends HTMLElement {
        constructor() {
            super();

            const template = document
                .getElementById('legacy-code-template')
                .content;
            const shadowRoot = this.attachShadow({mode: 'open'})
                .appendChild(template.cloneNode(true));
        }
    }

    customElements.define('legacy-code', LegacyCode);
</script>

1 Ответ

0 голосов
/ 06 октября 2018

Да.

Корневой узел документа HTML5 должен быть элементом <html>.Дочерние узлы элемента <html> должны быть элементами <head> и <body>.

На самом деле вы можете опустить их , но тогда они подразумеваются .

В вашем документе, если вы не укажете элементы <html>, <head> и <body>, они все равно будут добавлены браузером, а определенные вами корневые узлы будут добавлены в<head> или <body> в зависимости от их типа и положения на странице:

  • <link>, <meta>, <script> ... внутри <head>если они находятся в начале документа.

  • <div>, <span>, <section> и пользовательские элементы внутри <body>.

  • все последующие элементы внутри вставленного элемента.

Модель содержимого Пользовательский элемент имеет тип Flow , Phrasing или Paplable content .Это означает, что он должен быть вставлен в элемент <body>.

<html> и <body> внутри пользовательского элемента недопустимы и игнорируются.

...