影根自定义元素不呈现内容

Question

第一次使用自定义元素，所以也许我错过了一些明显的东西。

我有一个简单的自定义元素类，我正在将 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>

Answer 1

白底白字不是一个好主意;-(

尝试另一种颜色。

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>