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
7

So this worked in AU1

        <div repeat.for="endpoint of nServiceBusEndpoints">
            <end-point system.bind="endpoint" systems.bind="$parent.systems"></end-point>
             <error-queue system.bind="endpoint" systems.bind="$parent.systems"></error-queue>
        </div>

but in AU2 it fails with the dreaded DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow error

Care to explain why to someone who’s not a full-time js/ts framework developer? :wink:

Btw, even though the error goes away if I comment out the error-queue element nothing from the end-point component gets displayed. Not even the constructor in end-points.ts gets called.

Also, class EndPoints is marked as a custom element like this @customElement('end-point')

Both in end-point and in error-queue I’m referring to a component called status like so: <status></status> (bindings omitted for brevity). This might be the reason why the latter fails. If it is, then I don’t understand why the former don’t fail or perhaps in this case just fails silently.

8

do you know what element is causing the error exactly?

9

Sorry for the late reply. I’ve been away on holiday and didn’t see your reply until now.
I believe the issue was solved, because the application is working and has been in use for a while. I can’t remember what the solution turned out to be. Sorry about that.

The issue can be flagged as resolved (if that’s an option :slight_smile: )

– norgie