Apakah mungkin menyertakan head dan body sebagai elemen komponen web?

Saya mencoba contoh di bawah, tetapi web-html ditempatkan di dalam body, dan head kosong:

index.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));
    };
});
1
Medical physicist 30 Juni 2020, 17:09

1 menjawab

Jawaban Terbaik

Elemen Kustom harus disertakan dalam <head> atau dalam elemen <body>. Oleh karena itu tidak boleh mengandung elemen <head> atau <body>.

Akibatnya, jika Anda ingin menyertakan konten di <head> dan <body>, Anda harus melakukannya dengan cara yang berbeda: dengan document.head.appendChild() misalnya.

Selain itu, <head> dan <body> harus merupakan turunan langsung dari <html> sehingga Anda tidak dapat menyertakan mereka dalam elemen khusus.

2
Supersharp 1 Juli 2020, 17:20