Search code examples
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, agrees 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..

    customElements.define(
  "my-element",
  HTMLParagraphElement,
  {
    extends: "p",
  },
);

    If you want to understand the Apple Why,
    read back in time to early December 2013 - Yes! Web Components are not a new fad!

    Yes it would be cool to write <img is="queen-of-hearts"> (generating an IMG)

    SUPPORTED in Safari:

    We now have to do with <playing-card is="queen-of-hearts">
    which generates a <playing-code> tag with another <img> tag inside of it.

    Autonomous Elements (extend from HTMLElement)
    work 100% in all Modern Browsers

    customElements.define( "my-element", extends HTMLElement{ } );

    For Framework compatibility see: https://custom-elements-everywhere.com/
    (React is the odd one out)

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