如何解决扩展HTMLSelectElement
最近,出于语义和可访问性的原因,我尝试扩展HTMLSelectElement而不是创建全新的元素,即:
let customSelect = function () {
customElements.define(
"custom-select",class CustomSelect extends HTMLSelectElement {
connectedCallback() {
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
test
`;
}
},{ extends: "select" }
);
};
export default customSelect;
它返回以下错误:custom-select.js:6未捕获的DOMException:无法在“元素”上执行“ attachShadow”:此元素不支持attachShadow。
好,这是可以预见的。
由于我无法使用shadow-dom,因此我的问题是在那里最好的解决方案是什么?
到目前为止,我可以想象:
- 直接使用此组件的innerHTML。
- 创建与影子dom一起使用的全新元素。
- 是否覆盖现有阴影? (如果可能存在这种方法)。
那么,您认为最简单,最“ SEO友好”的解决方案是什么?
nb:解决方案必须基于自定义元素
解决方法
直接使用此组件的innerHTML。
这是“最简单且对SEO友好的解决方案”。
创建与影子dom一起使用的全新元素。
可能是最人性化的,因为您可以定义增强型UI。
要覆盖现有阴影吗?
不可能。它是只读的。
Example of <select>
enhanced with Custom Elements here in this other SO post。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。