How can I create polymer custom element with shadow dom so that I can access it's shadowRoot?

Question

I have use Polymer-cli (version 0.16.0) to scaffold a polymer project but could not access shadow-root using the console:

var element = document.getElementsByTagName("my-app")[0].shadowRoot returns undefined so It looks like shadow DOM is on closed mode.

How can I force a custom-element to use open mode so I can access it's shadowRoot from outside ?

Edited 2: The main question here is what needs to be done to access the shadowRoot so I changed the question a little bit to not be related with shadow DOM mode

Edited:

Reference to close modes on https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#advanced Advanced topics section

Steps to reproduce scenario:

npm install -g polymer-cli
mkdir my-app
cd my-app
polymer init starter-kit
polymer serve --open

Some code snippets:

index.html:

...
<head>
...
    <script>
      // Setup Polymer options
      window.Polymer = {
        dom: 'shadow',
        lazyRegister: true
      };

      // Load webcomponentsjs polyfill if browser does not support native Web Components
      (function() {
        'use strict';

        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };

        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );

        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = true;
          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = onload;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();

      // Load pre-caching Service Worker
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/service-worker.js');
        });
      }
    </script>

    <link rel="import" href="/src/my-app.html">
...
</head>
<body>
    <my-app></my-app>
</body>
</html>

my-app.html:

...
<dom-module id="my-app">

<template>
...
</template>

  <script>

    Polymer({

      is: 'my-app',

      properties: {

        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        }

      },

      observers: [
      '_routePageChanged(routeData.page)'
      ],

      _routePageChanged: function(page) {
        this.page = page || 'view1';
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = 'view404';
      }

    });

  </script>

</dom-module>

Note also that if you want to polyfill Shadow DOM on Firefox you should download webcomponents.js instead of webcomponents-lite.js that doesn't include the Shadow DOM polyfill. — Supersharp, Oct 02 '16 at 20:25

score 0 · Answer 1 · answered Oct 02 '16 at 12:01

0

If you use shady DOM (default) then there is no shadowRoot.

See https://www.polymer-project.org/1.0/docs/devguide/settings how to enable shadow DOM.

Something like this should work

var element = Polymer.dom(document.getElementsByTagName("my-app")[0]).root

For more details see https://www.polymer-project.org/1.0/docs/devguide/local-dom

answered Oct 02 '16 at 12:01

Günter Zöchbauer

623,577
216
2,003
1,567

Edited to include dom settings: it's defined as "shadow". `var element = Polymer.dom(document.getElementsByTagName("my-app")[0]).root` also returns undefined from console – Marcos Macedo Oct 02 '16 at 13:28
When you enable shadow DOM, you don't need `Polymer.dom(...)`. What does `document.getElementsByTagName("my-app")[0]` return? – Günter Zöchbauer Oct 02 '16 at 13:38
`document.getElementsByTagName("my-app")[0]` returns `#shadow-root (open)` with .root or .shadowRoot or with Polymer.dom it returns undefined – Marcos Macedo Oct 02 '16 at 14:13
Google Chrome linux Version 53.0.2785.116 (64-bit) Mozilla Firefox linux 49.0.1 – Marcos Macedo Oct 02 '16 at 14:30
Sorry, no idea. I'm using Polymer only with Dart and don't know details about using it with JS. – Günter Zöchbauer Oct 02 '16 at 14:32

Supersharp · Answer 2 · 2016-10-06T15:17:24.043

0

Actually it should work. See the snippet below.

Maybe you don't add the { dom: 'shadow' } setting at the right place. It should be defined before <link> to polymer.html.

output.textContent = document.querySelector('my-app').shadowRoot

<head>
  <script>
    window.Polymer = {
      dom: 'shadow',
      lazyRegister: true
    }
  </script>
  <link rel=import href="https://rawgit.com/polymer/polymer/master/polymer.html">
</head>

<body>
  <dom-module id="my-app">
    <template>
      Hello
    </template>
    <script>
      Polymer({
        is: 'my-app'
      })
    </script>
  </dom-module>
  <my-app></my-app>
  <div id=output></div>
</body>

edited Oct 06 '16 at 15:17

answered Oct 06 '16 at 14:56

Supersharp

29,002
9
92
134

I didn't edited the code, it is scaffolded in the *steps to reproduce scenario* section in the question. And the test is run on browser console, I also think it _should_ run but don't – Marcos Macedo Oct 07 '16 at 01:41
Then you should open an issue on the site of the editor if you think the issue is not your fault – Supersharp Oct 07 '16 at 14:32

How can I create polymer custom element with shadow dom so that I can access it's shadowRoot?

2 Answers2