Vanilla JS web 组件包括和

Question

是否可以将头部和身体作为 web 组件的元素包含在内？

我尝试了下面的示例，但是web-html放在body内，而head是空的：

索引.html ：

<!doctype html>
<html>
    <web-html></web-html>
    <script type="module" src="html.js"></script>
</html>

html.js ：

customElements.define('web-html', class extends HTMLElement {
    constructor() {
        super();
        const template = document.createElement('template');
        template.innerHTML = `
            <head>
                <meta charset="utf-8" />
                <title> Index </title>
            </head>
            <body>
                <slot> ... </slot>
            </body>
        `;
        const shadowRoot = this.attachShadow({mode:'open'});
        shadowRoot.appendChild(template.content.cloneNode(true));
    };
});

Answer 1

自定义元素必须包含在<head>或<body>元素中。 因此它不应包含任何<head>或<body>元素。

因此，如果您想在<head>和<body>上都包含内容，则需要以不同的方式进行：例如使用document.head.appendChild() 。

此外， <head>和<body>必须是<html>的直接子元素，因此您不能将它们包含在自定义元素中。

Answer 2

Web 组件是 html 文档正文的一部分。 当你想在头脑中包含 somphing 时，你必须通过 dom api 来做到这一点。 但是你可以在不同的模板中做 head 的东西并将内容复制到 head 标签中。

Vanilla JS web 组件包括和

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-07-01 17:20:03

解决方案2
0 2022-02-02 16:50:38

Vanilla JS web 组件包括和

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-07-01 17:20:03

解决方案2 0 2022-02-02 16:50:38

解决方案1
2 已采纳 2020-07-01 17:20:03

解决方案2
0 2022-02-02 16:50:38