CODEWITHSUNDEEP
javascriptweb-component
droid001
droid001

Reputation: 173

Test support for customized built-in elements

Is there a way to test support for customized built-in elements vs. autonomous custom elements? The way to test for support for v1 of WebComponents with (‘customElements’ in window) like in this answer, but I haven’t found anything which could help on identifying more detailed support on CustomElements.

Upvotes: 2

Views: 398

Answers (4)

mbehzad
mbehzad

Reputation: 3878

I think checking if the createElement's options argument is used or not is enough. This has the advantage that it doesn't really define an unnecessary custom element in the CustomElement Registry.

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

Upvotes: 1

Camilo Rodríguez
Camilo Rodríguez

Reputation: 31

You can check if the property extends is read:

let supportCustomizedBuiltInElements = false

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

Upvotes: 1

connexo
connexo

Reputation: 56754

You can create a customized built-in element and check the name property of its constructor:

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

Upvotes: 0

Supersharp
Supersharp

Reputation: 31171

To test the feature, you could:

  1. Define a customized built-in element.
  2. Try to create it.
  3. See if it throw an exception.

Example:

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 )

Upvotes: 2

Related Questions