Тег шаблона, созданный с помощью JS, не появляется при добавлении к тени внутри веб-компонента - PullRequest
Новая
       14

Тег шаблона, созданный с помощью JS, не появляется при добавлении к тени внутри веб-компонента

0 голосов
/ 13 января 2019

Я ожидаю, что следующий код создаст элемент, содержащий div с текстом «Привет».

Элемент появляется в инспекторе, но текст не отображается на экране.

Когда я меняю шаблон с template на div, появляется текст. Что я тут не так сделал? 

class MyComponent extends HTMLElement {
    constructor() {
        super()

        const shadowRoot = this.attachShadow({ mode: 'open' })
        const template = document.createElement('template')
        const div = document.createElement('div')

        div.innerHTML = 'Hi'
        template.appendChild(div)

        shadowRoot.appendChild(template.content)
    }
}
customElements.define('my-component', MyComponent)

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Я согласен с ответом @ Supersharp. Вот альтернативное решение без необходимости <template>. 

class MyComponent extends HTMLElement {
    constructor() {
        super()
        const div = document.createElement('div')
        div.innerHTML = 'Hi'
        this.attachShadow({ mode: 'open' }).appendChild(div)
    }
}
customElements.define('my-component', MyComponent)
<my-component></my-component>

Или вы можете сделать это, используя innerHTML из shadowRoot: 

class MyComponent extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' }).innerHTML = "<div>Hi</div>";
    }
}
customElements.define('my-component', MyComponent)
<my-component></my-component>
0 голосов
/ 13 января 2019

<template> - это особый элемент.

Добавьте некоторые элементы HTML через свойство content: 

template.content.appendChild(div)

или добавьте HTML-код через свойство innerHTML: 

template.innerHTML = '<div>Hi</div>'
...