How can you detect if Polymer is using Shady or Shadow DOM in Polymer Dart 1.0.0?

Question

After reading this wiki page , on Polymer Dart 1.0.0, and reading the fact that currently Polymer Dart defaults to using shady dom, (not that this is a surprise to me), and you can change it to use shadow dom. If shadow dom is used, some of my latest elements won't work. I was wondering how you can detect if you're using shadow or shady dom at runtime?

Answer 1

There is a not documented boolean flag setted on Polymer object:

Polymer.Settings.useNativeShadow

It is set as useShadow && nativeShadow , so it is true if both, you requested Shadow DOM, and the browser supports it.

https://github.com/Polymer/polymer/blob/cb68ce54ebdcfb2d6f7342e801574881fb158076/src/lib/settings.html#L46

Answer 2

I don't know of an official way but you could use document.querySelector('some-shadowed-element') to query an element known to be hidden in the shadow DOM of a custom element and if it is found shady DOM is used, otherwise it's shadow DOM.

You shouldn't need to differentiate between shady and shadow DOM in your application. If you use the proper API for manipulating your content ( new PolymerDom(...)... ) then your elements should work in both modes.

Answer 3

I seem to have answered my own question. I forgot about shadowRoot. In migrating from the old Polymer Dart to Polymer Dart 1.0.0 I had to remove any references to shadowRoot, as they were null. If shadowRoot is null then you're using shady DOM, otherwise it's shadow DOM. This method will work inside an element.

...
bool usesShadowDOM() {
    return shadowRoot != null;
}
...

I tested it, with both

<script>
    ...
    Polymer.dom = 'shadow';
    ...
</script>

and

<script>
    ...
    Polymer.dom = 'shady';
    ...
</script>

and it seems to do the job I'm wanting it to.