Javascript 聚合物2.0 getElementById在不同的阴影中

我正在尝试学习Polymer 2.0，但遇到了从不同的阴影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>

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

p{
字体大小：粗体；
}
.改变{
颜色：红色；
}
普通p标记中的一些文本

聚合物({
是：‘sc navdrawer’，
特性：{
输入文本：{
类型：字符串，
值：“p标记中的某些innerhtml文本
”
}
}
});

聚合物WC 2:

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

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

单击此处更改颜色
聚合物({
是：“sc测试页”，
changeColor:function（）{
var targetText=document.getElementById（“测试”）；
console.log（targetText）；
targetText.classList.add（“已更改”）；
}
});

如果您的两个元素彼此具有子-父关系，则不应使用getElementById，而应使用此选项

我还认为，与其在WC2中使用onclick按钮，不如使用on-tap。这是聚合物文档中推荐的方法。

进一步说，我真的不明白为什么要在onclick属性上使用双向数据绑定。我可能遗漏了一些东西，但您的代码应该可以很好地与正常的函数调用配合使用。

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

单击此处更改颜色
聚合物({
是：“sc测试页”，
changeColor:function（）{
var TARGETEXT=此$.sc navdrawer$.test；
console.log（targetText）；
targetText.classList.add（“已更改”）；
}
});

---

尝试使用纸张输入并设置其值：

然后您可以像这样访问变量：

var targetText=this.$.inputText

（这应该适用于纸张输入以外的其他元素）
我看到的第一件事是使用
document.getElementById（“测试”）Polymer 2强制您使用阴影Dom，因此此命令应替换为
Polymer.Dom（this.root）.querySelector（“#test”）
。因为影子Dom封装了组件，所以您无法使用
文档
对象访问其内容

但这不应该解决你的问题。这种封装意味着您无法访问WebComponent的内容，因此无法从另一个组件访问id为xyz的元素。查看这些链接，它们将向您解释shadowDom的工作原理：

1.  

2.  

3. 
 这两个元素在某种程度上是相互关联的吗？这意味着他们有父母子女关系？谢谢你的回答。实际上，双向绑定是不必要的，也不是onclick，但我很快就用MWE说明了这个问题。我尝试了你的建议，但没有成功：两个元素都有相同的父元素，sc navdrawer不是sc testpage的父元素，反之亦然。除此之外，我认为在你的代码中应该说
this.$.scNavdrawer.$.test
？在任何情况下，它总是将targetText返回为Null。我认为这是在聚合物2中发生的变化，实际上是第1点。至少在孩子和父母的关系上是错误的。这只适用于Polymer 1和shady dom。谢谢。是的，这确实是问题所在。谢谢你的链接；我会把它们通读一遍。我还注意到，我也无法从同一个WC中访问该元素。谢谢。你让我走上了正确的道路。我还得习惯，但我已经开始工作了！可怕的聚合物一开始很奇怪，但一旦你完全理解它，它就会变得非常强大；-）