我有一个自定义元素< my-element>.其目的是使行为像< ol>元件.我正在使用实例化它:
class MyElement extends HTMLElement { ... }
window.customElements.define('my-element', MyElement, { extends: 'ol' });
我生成的HTML如下所示:
<my-element>
<li>...</li>
<li>...</li>
<li>...</li>
</my-element>
自然,这将使基本的HTML验证失败:
Error: Element li not allowed as child of element my-element in this context. (Suppressing further errors from this subtree.)
Contexts in which element li may be used:
- Inside ol elements.
- Inside ul elements.
但是,验证者不知道我是从< ol>开始的元素.是否存在extends:“ ol”使我可以添加< li>元素直接添加到我的组件中,还是我仍然需要提供< ol>包装纸?
注意:此问题与put a `<custom-tag>` instead of a `<ul>` or `<ol>` to create a list非常相似,但是在定义新的自定义元素时未提及extends选项.因此,我认为适合提出一个新问题,而不是潜在地弄乱那个问题的含义.
解决方法:
根据规范,Custom Elements最终将能够扩展其他元素.但是现在不是时候.
https://developers.google.com/web/fundamentals/web-components/customelements#extend
Warning: At time of writing, no browser has implemented customized built-in elements (07001).
只需研究所有必需的ARIA属性以及所需的CSS.