inert elements in shadowDom

[valdrinkoshi]

inert is not handled for elements inside a shadow dom
http://jsbin.com/cebogor/3/edit?html,output

[samthor]

Can you try out the inert-polyfill.js from the shadow branch and let me know if it works for you?

The only issue I can see so far is that the styling rules don't seem to pierce the shadow DOM (i.e., [shadow] { pointer-events: none } is ignored inside ::shadow)

[valdrinkoshi]

It doesn't seem to work unfortunately http://jsbin.com/cebogor/5/edit?html,output
I've changed the script src to point to shadow branch, but it's still possible to click the shadow button.
UPDATE: probably because of the fact that pointer-events: none doesn't get applied. That's because they need to be added in the shadow root of that element. Maybe it's possible to lazily add these styles when you find an inert element contained in a shadow root?

[samthor]

Yes, that's right, I haven't fixed the pointer-events CSS as I mentioned in the first comment.

I'll look at the lazy-add solution soon (since ::shadow and /deep/ are deprecated in v1).

[samthor]

This is in master now (I think; I suspect it might struggle with shadow in shadow, but I'll test that soon), and we also don't lazy-load the CSS into shadow roots yet.