相关疑难解决方法(0)

我有一个像这样定义的 Web 组件自定义元素。

 <template id="dropdown-template">
        <select>
            <slot></slot>
        </select>
    </template>
    <script>
        class Dropdown extends HTMLElement {
            constructor() {
                super();
                const shadowRoot = this.attachShadow({mode: 'open'});
                let template = document.getElementById('dropdown-template');
                shadowRoot.appendChild(template.content.cloneNode(true));
            }
        }
        customElements.define("drop-down", Dropdown);
    </script>

在尝试使用它时，我尝试将带有值的选项标签传递到自定义元素中。

<drop-down>
     <option>one</option>
     <option>two</option>
     <option>three</option>
</drop-down>

这不起作用。select 元素显示为具有一个<slot>元素作为其直接子元素，并且它不呈现选项。这不可能与<select>标签有关吗？