Check if html element is supported

Question

How to check if html element is supported, datalist for example? MDC says it is supoorted only in Opera and FireFox.

Athelstan

Answer 1

if ('options' in document.createElement('datalist')) {
    // supported!
}

http://diveintohtml5.info/everything.html#datalist

Marienbad

Answer 2

If someone needs to check for support of other HTML5 elements this could also be used.

https://github.com/ryanmorr/is-element-supported

From http://ryanmorr.com/determine-html5-element-support-in-javascript/

/*
 * isElementSupported
 * Feature test HTML element support 
 * @param {String} tag
 * @return {Boolean|Undefined}
 */

(function(win){
    'use strict';       

    var toString = {}.toString;

    win.isElementSupported = function isElementSupported(tag) {
        // Return undefined if `HTMLUnknownElement` interface
        // doesn't exist
        if (!win.HTMLUnknownElement) {
            return undefined;
        }
        // Create a test element for the tag
        var element = document.createElement(tag);
        // Check for support of custom elements registered via
        // `document.registerElement`
        if (tag.indexOf('-') > -1) {
            // Registered elements have their own constructor, while unregistered
            // ones use the `HTMLElement` or `HTMLUnknownElement` (if invalid name)
            // constructor (https://mcmap.net/q/344523/-how-to-get-list-of-registered-custom-elements)
            return (
                element.constructor !== window.HTMLUnknownElement &&
                element.constructor !== window.HTMLElement
            );
        }
        // Obtain the element's internal [[Class]] property, if it doesn't 
        // match the `HTMLUnknownElement` interface than it must be supported
        return toString.call(element) !== '[object HTMLUnknownElement]';
    };

})(this);

Waterscape

This also works for <ruby> which is still simply HTMLElement. However, this function lets custom element pass, even when undefined (it will become [object HTMLElement], rather HTMLUnknownElement). Nonetheless, in my latest Firefox, things like <invalid> always becomes HTMLUnknownElement. – Belated

Also, document.createElement('x-element').constructor === HTMLElement returns false in my Firefox; but document.createElement('x-element').toString() is indeed "[object HTMLElement]". – Belated

Answer 3

Check if the browser support the HTMLDataListElement interface:

if(typeof HTMLDataListElement === 'function') {
   // your code here      
} else {
  // your code here if this feature is not supported
}

Dawna

Answer 4

This should works, including elements that become HTMLElement rather than HTML{Tag}Element (like <nav> and <ruby>); and also detects custom elements.

/**
 *
 * @param {string} tag
 */
export function tryCreateElement(tag) {
  const element = document.createElement(tag)
  const repr = element.toString()

  const output = {
    element,
    tag,
    type: 'standard',
    isValid: repr === '[object HTMLUnknownElement]' ? null : true
  }

  if (
    [
      'annotation-xml',
      'color-profile',
      'font-face',
      'font-face-src',
      'font-face-uri',
      'font-face-format',
      'font-face-name',
      'missing-glyph'
    ].includes(tag)
  ) {
    // These are not valid customElement identifiers
    // But if not defined, they will be '[object HTMLUnknownElement]', anyway.
  } else if (tag.includes('-')) {
    output.type = 'customElement'
    if (repr === '[object HTMLElement]') {
      output.isValid = false
    }
  }

  return output
}

{ type: 'standard', isValid: null } is an unsupported standard element.

About that repo in the answer, it seems that the code is simply

/*
 * Feature test HTML element support
 *
 * @param {String} tag
 * @return {Boolean|Undefined}
 */
export default function isElementSupported(tag) {
    return {}.toString.call(document.createElement(tag)) !== '[object HTMLUnknownElement]';
}

It did work well other than that it doesn't invalidate custom elements.

Belated