如何創建帶有陰影dom的聚合物自定義元素，以便可以訪問它的shadowRoot？

Question

我已經使用Polymer-cli（0.16.0版）來構建聚合物項目，但是無法使用控制台訪問shadow-root：

var element = document.getElementsByTagName("my-app")[0].shadowRoot返回未定義，因此陰影DOM處於關閉模式。

如何強制自定義元素使用開放模式，以便可以從外部訪問它的shadowRoot？

編輯2：這里的主要問題是訪問shadowRoot需要做些什么，因此我將問題稍作更改以使其與Shadow DOM模式無關

編輯：

有關https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#advanced高級主題部分中的關閉模式的參考

重現方案的步驟：

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

一些代碼片段：

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>

我-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>

Answer 1

如果使用陰影DOM（默認），則沒有shadowRoot 。

請參閱https://www.polymer-project.org/1.0/docs/devguide/settings如何啟用影子DOM。

這樣的事情應該工作

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

有關更多詳細信息，請參見https://www.polymer-project.org/1.0/docs/devguide/local-dom

Answer 2

實際上它應該工作。 請參見下面的代碼段。

也許您沒有在正確的位置添加{ dom: 'shadow' }設置。 它應該在<link>到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>

如何創建帶有陰影dom的聚合物自定義元素，以便可以訪問它的shadowRoot？

問題描述

2 個解決方案

解決方案1
0 2016-10-02 12:01:11

解決方案2
0 2016-10-06 14:56:24

如何創建帶有陰影dom的聚合物自定義元素，以便可以訪問它的shadowRoot？

問題描述

2 個解決方案

解決方案1 0 2016-10-02 12:01:11

解決方案2 0 2016-10-06 14:56:24

解決方案1
0 2016-10-02 12:01:11

解決方案2
0 2016-10-06 14:56:24