Shadow DOM in a button

Question

There's a working JS Fiddle that demonstrates Shadow DOM here. (Note: There's some setup required to get this to work. I'm on Google Chrome Version 20.0.1132.47 beta with the "Shadow DOM" experiment enabled via chrome://flags)

I created a revision of it here that uses a button instead of a span, and it doesn't work. It throws an:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3 

Any idea why you can add Shadow DOM to a span but not a button?

Answer 1

This is a limitation of the current implementation in WebKit.

Early on in the implementation, an element could have at most one shadow root attached to it. Because some elements used Shadow DOM internally (such as video) or planned to (such as input elements) there's a hard-coded restriction that disallows creating an author shadow root for these elements.

You can track the status of the implementation of author Shadow DOM for button elements in WebKit bug 91486.