shadow Root пользовательский элемент не отображает содержимое - PullRequest
Новая
       72

shadow Root пользовательский элемент не отображает содержимое

0 голосов
/ 06 февраля 2020

Впервые с пользовательскими элементами, так что, может быть, я упускаю что-то очевидное.

У меня есть простой класс пользовательских элементов, в который я вставляю HTML, но он не отображается на стр. Любые подсказки? 

class SearchBar extends HTMLElement{
    constructor(){
        super();
        var shadowRoot = this.attachShadow({mode: "open"});

    shadowRoot.innerHTML = `
    <input type="text" class="video-input" placeholder="Enter a YouTube URL...">
    <style>.video-input{width: 100%; padding: 14px; font-size: 1.3em;color:white;}</style>
    `
    }
}

window.customElements.define("search-bar", SearchBar);

И HTML: 

<div class="video-container">
     <search-bar></search-bar>
</div>

1 Ответ

0 голосов
/ 06 февраля 2020

Белое на белом не очень хорошая идея; -)

Попробуйте другой цвет. 

class SearchBar extends HTMLElement{
    constructor(){
        super();
        var shadowRoot = this.attachShadow({mode: "open"});

    shadowRoot.innerHTML = `
    <input type="text" class="video-input" placeholder="Enter a YouTube URL...">
    <style>.video-input{width: 100%; padding: 14px; font-size: 1.3em;color:red;}</style>
    `
    }
}

window.customElements.define("search-bar", SearchBar);
<div class="video-container">
     <search-bar></search-bar>
</div>
...