Polymer 2.0 getElementById 在不同的 ShadowDom

Question

我正在尝试学习 Polymer 2.0，但遇到从不同 Shadow Dom 获取元素的问题。这在 Polymer 1 中有效，但在 Polymer 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：

<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。
Polymer 2 强制您使用 Shadow Dom，因此该命令应替换为 Polymer.dom(this.root).querySelector("#test")。因为 Shadow Dom 封装了您的组件，所以您无法使用 document 对象访问其内容
但这不应该解决您的问题。这种封装意味着您无法访问 WebComponent 的内容，因此您无法从另一个组件访问具有 id:xyz 的元素。看看这些链接，他们将向您解释 shadowDom 的工作原理：
1.https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
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

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

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

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

var targetText = this.$.inputText;

（这应该适用于纸张输入以外的其他元素）

Answer 3

1. 您应该使用Automatic node finding 而不是使用getElementById@ 如果您的两个元素彼此具有子父关系，则此方法有效。
2. 我还认为，在 WC 2 中，您不应使用 onclick 按钮，而应使用 on-tap。这是 Polymer 文档中推荐的方式。
   
   

3. 此外，我真的不明白您为什么在 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>