'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.

javascriptweb-componenthtmlcss


Solution 1:[1]

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 )

Solution 2:[2]

You can check if the property extends is read:

let supportCustomizedBuiltInElements = false

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

Solution 3:[3]

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; 
      }
    });

Solution 4:[4]

Figured it out (with javascript)

window.onload = function () {
  resizeImages();
};

function resizeImages() {
  var images = document.querySelectorAll("figure > img");
  var originalWidth = 0;
  for (var i = 0; i < images.length; i++) {
    originalWidth = images[i].naturalWidth;
    images[i].style.width = (originalWidth * 0.25) + "px";
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Supersharp
Solution 2
Solution 3 mbehzad
Solution 4

Related Questions