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

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:

• generates an (extra) <img> tag inside of it
• Or replaces the <playing-card> with an <img>

---

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

• Web Components = semantic, declarative HTML
• Frameworks/Libraries = “div soup” that needs post-processing

---

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.

• IE11 usage is under 0.2% globally
• Essentially gone in Europe, North America, and Australia
• Slightly higher (but still under 0.5%) in parts of Asia due to legacy apps
• Most traffic even there is on modern browsers

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