时间戳

首页 > 解决方案 > 模板标签内的html和body标签

web-component - 模板标签内的html和body标签

问题描述

我有一个自定义元素，我想用模板标签中的 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>

标签： web-component

解决方案

是的。

HTML5 文档的根节点必须是<html>元素。元素的子节点<html>必须是<head>and<body>元素。

实际上你可以省略它们，但它们是隐含的。

在您的文档中，如果您不指定<html>,<head>和<body>元素，浏览器无论如何都会添加它们，并且您定义的根节点将根据它们的类型和它们在页面中的位置添加到<head>or中：<body>

  • <link>, <meta>, <script>...<head>如果它们在文档的开头。

  • <div>, <span>,<section>和 中的自定义元素<body>。

  • 插入元素后，所有后续元素。

自定义元素的内容模型是Flow、Phrasing或Paplable content类型。这意味着它必须插入到<body>元素中。

<html>并且<body>在自定义元素内部无效并被忽略。

推荐阅读