Issue with @useShadowDOM / as="scoped"

#1

I’ve created a gist regarding an @useShadowDOM issue:

https://gist.dumber.app/?gist=3f603f94ab49bb2a7b085d7e7efd8dbd

1. question
What did I wrong? There’s the following error in console:

DOMException: Failed to execute ‘attachShadow’ on ‘Element’: This element does not support attachShadow

2. question
Is scoped css (@useShadowDOM / as=“scoped”) supported in IE 11?

Thank you.

1 Like
#2

  1. attachShadow on any elements that are not specific built-in elements (body/div/p and a several more), or elements with a hyphen in their names (to indicate it’s a custom element) will throw the error you saw. Simply fix it by putting a hyphen in the name.

  2. IE11 does not support shadowDOM, and the shadyDOM polyfill wont give you everything you expect from a real shadowDOM feature, as it’s impossible to polyfill. So i’d guess scoped support is irrelevant

1 Like
#3

Thank you.

So this means I cannot use scoped css at all if I have to support IE 11? My problem is that if I use as=“scoped” and @useShadowDOM, the styles are not applied in IE 11, even not in the element itself.

1 Like
#4

You cannot just enable ShadowDOM on <message> tag.
ShadowDOM has this unintuitive requirement: the tag name must contain at least one dash, you need to name your custom element like <my-message>.

Change message to my-message, your gist works.

1 Like
#5

Yes I know thank you, I already fixed my gist:

https://gist.dumber.app/?gist=18e188dbafc2efba9649be9ffe7ee335

But, in IE11 the styles are not working, even not in the element (my-message) itself. It’s hard to proove as viewing gists is not supported in IE11 :sweat_smile:

Is it possible to use scoped css for the modern browsers and have a kind of fallback to global styles for IE 11?

1 Like
#6

The village naive code here.
Could you not detect browser type/version on load, and just globally load the css there if its an older one, and let it fall through to the scoped in the view if supported?

Not sure if it would double load, or just ignore the scoped, but if it does ignore it then it might work.
I guess the issues is bundling the css all together and running into naming conflicts.

1 Like