Блог

Главная - Вопросы по программированию - Как я могу создать пользовательский элемент polymer с помощью shadow dom, чтобы я мог получить доступ к его shadowRoot?

Как я могу создать пользовательский элемент polymer с помощью shadow dom, чтобы я мог получить доступ к его shadowRoot?

#javascript #polymer #web-component #shadow-dom #polymer-cli

#javascript #polymer #веб-компонент #shadow-dom #polymer-cli

Вопрос:

Я использую Polymer-cli (версия 0.16.0) для создания каркаса проекта polymer, но не смог получить доступ к shadow-root с помощью консоли:

var element = document.getElementsByTagName("my-app")[0].shadowRoot возвращает undefined, поэтому похоже, что shadow 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
          amp;amp; 'import' in document.createElement('link')
          amp;amp; '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>

Комментарии:

1. Можете ли вы добавить какой-нибудь код

2. Что такое открытый и закрытый режим?

3. Также обратите внимание, что если вы хотите заполнить Shadow DOM в Firefox, вам следует загрузить webcomponents.js вместо того , чтобы webcomponents-lite.js это не включает в себя полифилл Shadow DOM.

4. Что написано в консоли?

Ответ №1:

Если вы используете shady DOM (по умолчанию), то нет shadowRoot .

Смотрите https://www.polymer-project.org/1.0/docs/devguide/settings как включить shadow DOM.

Что-то вроде этого должно работать

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

Для получения более подробной информации см. https://www.polymer-project.org/1.0/docs/devguide/local-dom

Комментарии:

1. Отредактировано, чтобы включить настройки dom: он определяется как «shadow». var element = Polymer.dom(document.getElementsByTagName("my-app")[0]).root также возвращает undefined из консоли

2. Когда вы включаете shadow DOM, вам не нужно Polymer.dom(...) . Что document.getElementsByTagName("my-app")[0] возвращает?

3. document.getElementsByTagName("my-app")[0] возвращает <my-app page="view1">#shadow-root (open)</my-app> с помощью . root или .shadowRoot или с помощью Polymer.dom возвращает undefined

4. Google Chrome linux версии 53.0.2785.116 (64-разрядная версия) Mozilla Firefox linux 49.0.1

5. Извините, понятия не имею. Я использую Polymer только с Dart и не знаю подробностей об его использовании с JS.

Ответ №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>

Комментарии:

1. Я не редактировал код, он приведен в разделе » Шаги по воспроизведению сценария » в вопросе. И тест запускается на консоли браузера, я также думаю, что он должен запускаться, но не

2. Затем вам следует открыть проблему на сайте редактора, если вы считаете, что проблема не по вашей вине