shadowRoot 自定义元素不呈现内容答案

【问题标题】：shadowRoot custom element not rendering contentshadowRoot 自定义元素不呈现内容
【发布时间】：2020-05-22 14:49:45
【问题描述】：

第一次使用自定义元素，所以我可能遗漏了一些明显的东西。

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

【问题讨论】：

标签： shadow-dom custom-element

【解决方案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>

【讨论】：

谢谢，但它是在背景颜色为黑色的容器顶部呈现的，所以不是这样。在开发人员工具中，检查器甚至不显示 shadow-root 属性，因此它根本不渲染。
@notmynamelastname 查看我帖子中的示例：它有效。所以错误应该是 elsewere 但不在您提供的代码中