safarimobile-safariweb-component

What web component features are not supported by Safari desktop and Safari iOS?


Most references as below mention that Safari partially supports web components.

In detail, what web component features are not supported by Safari desktop and Safari iOS?

Is there a technical docs or specs about the issue?

https://developer.mozilla.org/en-US/docs/Web/Web_Components

https://caniuse.com/shadowdomv1


Solution

  • Burn all old blogs!

    Apple Safari supports Web Components, apart from Customized Built-In Elements.

    After an ongoing debate since 2013, nearly everyone, who understand what OOP means,
    agree Apple engineers are right on this one, not supporting Customized Built-In Elements


    NOT SUPPORTED in Safari: Customized Built-In Elements

    extend from any existing HTML Element: <p>, <input>, etc..

    with:

    customElements.define( "queen-of-hearts", HTMLImageElement, { extends: "img" } );
    

    then <img is="queen-of-hearts"> does work all browsers, except Safari

    If you want to understand the Apple Why,
    read back in time to the Browser developers discusion early December 2013

    Yes 2013!
    Web Components are not a new fad!

    Be sure to read up on your OOP knowledge first: The Liskov substitution principle


    SUPPORTED in Safari:

    Autonomous Elements (extend from HTMLElement)

    work 100% in ALL Modern Browsers

    customElements.define( "playing-card", extends HTMLElement{ } );
    

    This creates one Web Component, that can generate 52 playing-cards

    <playing-card is="queen-of-hearts"> then:


    Deep dive into Web Components, React & Lit like BaseClasses:
    Main differences between lit-element Web Components & React



    Custom Elements (Web Components) ARE HTML. Frameworks and libraries merely CREATE HTML.


    ✅ With Web Components, you can write:

    <playing-card is="queen-of-hearts"></playing-card>
    

    …and it just works, rendering an SVG card. See my <playing-card> Web Component: https://cardmeister.github.io/index.html

    It does not matter when you register the <playing-card> element in JavaScript — the browser handles it.

    You can even build Web Components without JavaScript altogether, using:

    <template shadowrootmode="open">
      ...
    </template>
    

    ✅ With a framework or library, you typically start with something like:

    <div class="playing-card" data-card="queen-of-hearts"></div>
    

    …but you still need JavaScript after the DOM is parsed (hello FOUC!) to transform it into the intended SVG card.


    🟢 Key points


    All modern browsers support Web Components today.

    👉 Apple (correctly, following the Liskov principle) blocked Customized Built-In Elements as early as 2013 — showing this is not some new fad. In fact, the browser engines have been using these principles (shadow DOM, encapsulation) internally for complex tags like <video> and <select> for many years.

    US mortal developers only got public APIs in 2018.


    ✅ If you’re building a public-facing website in 2025, you can safely drop IE11 support.

    (A polyfill is needed for Web Components if you still want to support IE11, but you probably shouldn’t.)