不同ShadowDom中的Polymer 2.0 getElementById

Question

我正在尝试学习 Polymer 2.0，但一直无法解决从不同阴影中获取元素的问题 Dom。这在 Polymer 1 中有效，但在 Polymer 2.0 中不再有效。正确的写法是什么？它只是告诉我 targetText = Null.

感谢您的帮助！

这是一个 MWE： 聚合物马桶 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>

聚合物马桶 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

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

此外，我不太明白您为什么要在 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>

Answer 2

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

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

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

var targetText = this.$.inputText;

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

Answer 3

嗯，我首先看到的是您使用了 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/

不同ShadowDom中的Polymer 2.0 getElementById

Polymer 2.0 getElementById in different ShadowDom

javascript

polymer-2.x