Does IOS Safari support Shadow DOM?

Question

My application is able to render the Shadow DOM, but the inspector cannot display the shadow root. Can anyone help me out on this?

Answer 1

It depends on which Shadow DOM you mean—Shadow DOM v0 or Shadow DOM v1.

See http://caniuse.com/#feat=shadowdomv1 and http://caniuse.com/#feat=shadowdom

No version of Safari supports Shadow DOM v0. But as far as iOS Safari, version 10.2+ support Shadow DOM v1 with the following limitation:

Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.

As far as differences between Shadow DOM v0 and v1, see https://hayato.io/2016/shadowdomv1/

---

2020-07-31 update: Shadow roots are no longer hidden in current Safari Web Inspector — instead they’re now always shown, regardless. See https://trac.webkit.org/changeset/253706/webkit/

---

_{In older versions of Safari where Web Inspector does not show shadow roots by default, there’s a button you need to click to show shadow roots; it looks like this:}

_{And in the Inspector UI, it’s in the toolbar on the right below the tabs. It turns blue when activated:}