我如何在光线 DOM 中显示属性

Question

我期待看到 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>

I need this variable to be bound, such that if I embed another component, rather than a <div>, the embedded component can change the parent's property

Answer 1

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

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

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

Answer 2

这有点难以解释。但是唯一可以看到 {{someVar}} 绑定的元素是包含 my-parent 的元素。 div 并没有物理移动到内容元素内部，它只是 'projected' 所以它在视觉上呈现在那个位置。这就是本机 Shadow DOM 的工作方式。

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

我如何在光线 DOM 中显示属性

How do I show a property in the light DOM

html

shadow-dom

polymer

我如何在光线 DOM 中显示 属性

How do I show a property in the light DOM

html

shadow-dom

polymer

我如何在光线 DOM 中显示属性