Polymer 2.0異なるShadowDomのgetElementById

Question

私はPolymer 2.0を学ぼうとしていますが、別のShadow Domから要素を取得するという問題に悩まされています。これはポリマー1では機能したが、ポリマー2.0では機能しなかった。これを書いている正しい方法は何ですか？それはちょうど私に、targetText = Nullと伝えます。

ありがとうございました！

これはMWEです： ポリマーWC 1：

<dom-module id="sc-navdrawer"> 
<template> 
<style is="custom-style"> 
p { 
    font-weight: bold; 
} 
.changed { 
    color: red; 
} 
</style> 
<p>Some text in normal p tag</p> 
<div id="test" class="htmltextcontent" inner-h-t-m-l="{{inputText}}"></div> 
</template> 

<script> 
    Polymer({ 
     is: 'sc-navdrawer', 
     properties: { 
      inputText: { 
      type: String, 
      value: "<p>Some innerhtml text in p tags</p>" 
      } 
     } 
    }); 

</script> 
</dom-module> 

ポリマーWC 2：代わりにgetElementByIdをを使用しての

<dom-module id="sc-testpage"> 
<template> 

<button onclick="{{changeColor}}">Click here to change color</button> 
</template> 

<script> 
    Polymer({ 
     is: 'sc-testpage', 
     changeColor: function() { 
      var targetText = document.getElementById("test"); 
      console.log(targetText); 
      targetText.classList.add("changed"); 
     } 
    }); 

</script> 
</dom-module> 

Answer 1

最初に私が見るものは、document.getElementById("test");を使用していますが、これがShady Domを使用したと言えばうまくいきます。
ポリマー2はシャドウドームを使用するように強制するので、このコマンドはPolymer.dom(this.root).querySelector("#test")に置き換えてください。 Shadow Domはあなたのコンポーネントをカプセル化するので、documentオブジェクト
でコンテンツにアクセスすることはできませんが、これで問題は解決しません。このカプセル化は、他のコンポーネントからid：xyzの要素にアクセスできないように、WebComponentのコンテンツにアクセスできないことを意味します。 2. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
3. https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Answer 2

1. 場合は、この作品Automatic node findingを使用する必要がありますあなたの2つの要素はお互いに親の関係にあります。
2. また、WC 2のボタンでonclickを使用する代わりに、オンタップを使用する必要があります。これはPolymerのドキュメントで推奨される方法です。
   
   

3. さらに、onclick属性に2方向データバインディングを使用している理由はわかりません。私は何かが不足しているかもしれませんが、あなたのコードは正常な関数呼び出しで完璧に動作するはずです。
   
   

   <dom-module id="sc-testpage"> 
       <template> 
       <button on-tap="changeColor">Click here to change color</button> 
       </template> 
   
       <script> 
       Polymer({ 
        is: 'sc-testpage', 
   
        changeColor: function() { 
        var targetText = this.$.sc-navdrawer.$.test; 
        console.log(targetText); 
        targetText.classList.add("changed"); 
        } 
       }); 
   
       </script> 
   </dom-module> 
   

Answer 3

紙入力を使用して、それが値です設定してみてください：

var targetText = this.$.inputText;

（：次に、あなたはこのように変数にアクセスすることができます

<paper-input id="test" label="input" value="{{inputText}}"></paper-input>

ティ