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

我有使用聚合物CLI（0.16.0版本）腳手架聚合物項目，但使用控制檯無法訪問影子根：如何創建帶有陰影dom的聚合物定製元素，以便我可以訪問它的shadowRoot？

var element = document.getElementsByTagName("my-app")[0].shadowRoot返回undefined所以它看起來像影子DOM是封閉的模式。

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

編輯2：這裏的主要問題是需要做訪問shadowRoot所以我改變了這個問題有點不與影子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：

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

來源

2016-10-02 Marcos Macedo

你可以添加一些代碼 – a1626

什麼是開放式和封閉式模式？ –

另請注意，如果您想在Firefox上填充Shadow DOM，則應下載webcomponents.js，而不要使用不包含Shadow DOM填充的webcomponents-lite.js。 – Supersharp

如果使用黑幕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

來源

2016-10-02 12:01:11

編輯爲包含dom設置：它被定義爲「陰影」。 'var element = Polymer.dom（document.getElementsByTagName（「my-app」）[0]）。root'也會返回undefined from console –

當你啓用shadow DOM時，你不需要'Polymer.dom（... ）'。 'document.getElementsByTagName（「my-app」）[0]'返回什麼？ –

'。shadowEase（open）'用.root或.shadowRoot或用Polymer.dom返回'document.getElementsByTagName（「my-app」）[0]'返回'它返回undefined –

其實它應該工作。請參閱下面的代碼片段。

也許你沒有在正確的地方添加{ 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>

來源

2016-10-06 14:56:24 Supersharp

我沒有編輯代碼，它在*步驟中腳手架重現問題中的方案*部分。並且測試在瀏覽器控制檯上運行，我也認爲它應該運行，但不要 –

然後，如果您認爲問題不是您的錯誤，那麼您應該在編輯器的網站上打開一個問題 – Supersharp

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

回答

相關問題