如何在 light DOM 中显示属性答案

【问题标题】：How do I show a property in the light DOM如何在 light DOM 中显示属性
【发布时间】：2016-03-17 08:31:27
【问题描述】：

我期待看到hello，但我看到的是{{someVar}}

<my-parent some-var="hello">
  <div>{{someVar}}</div>
</my-parent>

我将some-var="{{someVar}}" 传递给<content>：

<dom-module id="my-parent>
  <template>
    <content some-var="{{someVar}}"></content>
  </template>

  <script> Polymer({is: "my-parent"}); </script>
</dom-module>

我需要绑定这个变量，这样如果我嵌入另一个组件，而不是<div>，嵌入的组件可以更改父级的属性

【问题讨论】：

标签： html polymer shadow-dom

【解决方案1】：

这有点难以解释.. 但唯一能看到{{someVar}} 绑定的元素是包含my-parent 的元素。 div 并没有在内容元素内部物理移动，它只是“投影”，因此它在该位置视觉呈现。这就是原生 Shadow DOM 的工作原理。

如果您需要对您的分布式孩子做一些事情，您可能需要使用 EffectiveChildNodes API https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#effective-children

【讨论】：

谢谢，非常感谢帮助，它很难研究，因为文档有时有点碎片化和冗长，而且 0.5 占用了大量的 stackoverflow。我非常喜欢灵活性，但在组件的上下文/范围和互连方面遇到了麻烦

【解决方案2】：

在some-child中，确保属性定义有notify: true

properties: {
    locationHref: {
        type: String,
        notify: true
    }
}

见https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#property-notification

【讨论】：