Does IOS Safari support Shadow DOM?

问题:

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

回答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/

---

About how to see the shadow root in the WebKit/Safari Inspector, 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: