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

Issue

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?

Solution

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.

Answered By – James Hurford

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)