访问Web组件的本地DOM（从外部）并为其子项设置值

Question

我有一个使用 Polymer 开发的网络应用，并希望使用JavaScript实现端到端测试。这就是我尝试以编程方式设置某些值的原因，但我无法通过以下方式访问元素的本地DOM：

document.getElementById('nativeInput'); 
document.querySelector('#nativeInput');

有人告诉我，无法直接访问shadow-root元素并在其上设置值。所以我的基本问题是：如何访问元素的影子DOM并为其子元素设置一些值？请告诉我这是否可行，如果可以，请分享一些解决方案。

请参阅屏幕截图，以便在＃shadow-root（open）上使用我的JavaScript选择器在HTML元素上更清楚地了解我要完成的工作。

Answer 1

由于您提到端到端测试，我想指出Polymer为此提供了own, separate tool kit。

无论您最终会采用哪种技术/测试框架，请查看paper-input's tests,的实施，因为它们可以解决您遇到的确切问题。理解组件生命周期等概念在这里可能是必不可少的。

Answer 2

如果你想用聚合物元素之外的javascript发送一些值，你可以在根级别添加，就像你可以将值绑定到聚合物中一样。 Sometine喜欢：

  

的index.html

<dom-bind>
<template> 
  <my-app my-prop = "{{myProp}}" ></my-app>
</template>
</dom-bind>
<script>
  var bindVal = document.querySelector('dom-bind');
  bindVal.myProp = "Test"
</script>

所以在<my-app>元素中，你有一个带有“Test”值的myProp属性。