测试支持定制的内置元素

Question

有没有一种方法可以测试对自定义内置元素与自治自定义元素的支持？使用(‘customElements’ in window) like in this answer测试对WebComponents v1的支持的方法，但是我还没有发现任何有助于确定CustomElements更详细支持的东西。

Answer 1

要测试该功能，您可以：

1. 定义自定义的内置元素。
2. 尝试创建它。
3. 查看它是否引发异常。

示例：

var CustomBuiltinSupport = false
try {
    class FakeButton extends HTMLButtonElement {}
    customElements.define( 'fake-button', FakeButton, { extends: 'button' } )
    new FakeButton
    CustomBuiltinSupport = true
} 
catch ( e ) {
    console.log( e )
}
console.info( 'Custom Builtin Element Support: ', CustomBuiltinSupport )

Answer 2

您可以检查属性extends是否被读取：

let supportCustomizedBuiltInElements = false

customElements.define('some-element', SomeElement, { 
    get extends () { 
        supportCustomizedBuiltInElements = true
    } 
})

Answer 3

您可以创建一个自定义的内置元素并检查其name的{​​{1}}属性：

constructor