测试对自定义内置元素的支持

Question

有没有办法测试对自定义内置元素与自主自定义元素的支持？使用 (‘customElements’ in window) like in this answer 测试对 WebComponents v1 支持的方法，但我还没有找到任何有助于确定对 CustomElements 的更详细支持的方法。

Answer 1

要测试该功能，您可以：

定义自定义的内置元素。
尝试创建它。
看是否抛出异常

示例：

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

您可以创建自定义的内置元素并检查其 constructor 的 name 属性:

customElements.define('test-el', class TestEl extends HTMLDivElement {}, { extends: 'div' })
let supportsCBI = document.createElement('div', {is: 'test-el'}).constructor.name === 'TestEl'
console.log(supportsCBI)

Answer 3

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

let supportCustomizedBuiltInElements = false

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

Answer 4

我认为检查 createElement 的选项参数是否被使用就足够了。这样做的好处是它实际上并没有在 CustomElement 注册表中定义不必要的自定义元素。

    let supports = false;
    document.createElement('div', {
      get is() {
        supports = true; 
      }
    });

测试对自定义内置元素的支持

Test support for customized built-in elements

javascript

web-component