search

GoogleChrome / inert-polyfill

Polyfill for the HTML inert attribute
Apache License 2.0
187 stars 48 forks source link

inert elements in shadowDom #1

Open valdrinkoshi opened 8 years ago

valdrinkoshi commented 8 years ago

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

samthor commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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.