如何获得 Polymer domHost 属性？答案

【问题标题】：How to get Polymer domHost property?如何获得 Polymer domHost 属性？
【发布时间】：2016-09-19 04:30:40
【问题描述】：

我有一个结构非常简单的基本 Polymer 模板，如下所述： Polymer: can't get this.__data__ passing in from host（代码库在这里：https://srgg6701.github.io/Polymer_template）我需要使用从父母传递给孩子的数据。我可以通过它们并在this.domHost内看到它：

但是，如果我尝试获取 this.domHost.properties，它会显示 undefined (!)。

那么，两个问题：

为什么这里没有定义？
是否可以使这些数据可访问？

【问题讨论】：

我更新了我的答案，以更详细地回答您的两个问题。

标签： javascript api oop polymer polymer-1.0

【解决方案1】：

对于问题#1：它很可能是准备好的事件之前元素的副本，这就是它未定义的原因。大多数情况下您应该使用Polymer DOM API 在DOM 中进行操作。主机对象应位于：Polymer.dom(this).getOwnerRoot().host

对于问题#2： 使用Polymer Data Binding 完成您想要实现的工作。您仍然可以在父元素中使用this.policies，但数据绑定器会将信息提供给子元素，并且所有内容都将被同步和处理。

对于数据绑定，将属性添加到您的 x-comphost 和 x-child 元素：

properties: {
    data: {
        type: Object,
        value: null, // Default Value

        // Fire value-changed Event when changed
        // so the elements and the data binding
        // will react to that.
        notify: true

        // (optional) Listener for the property changing
        // if your want to make custom logic
        observer: '_doSomething' 
    }
}

在模板中添加如下属性：<x-child data="{{data}}"></x-child>

使用更多元素，您可以创建一个Behavior，其中可以包含属性和观察者详细信息，您无需复制粘贴到每个元素，但您可以根据需要覆盖：

var MyDataBehavior = {
    properties: {
        data: {type:Object, notify:true, observer: '_dataChanged'}
    },
    dataChanged: function( data ) { /* ... */ }
};

添加行为输入后，只需将其添加到元素定义中：

//...
behaviors: [MyDataBehavior],
//...

Shadow DOM 类似于一个封闭的城堡，你不能从里面进出，你必须建造桥梁让人们进出。

Monica Dinculescu（来自 Google Polymer 团队）：

用桥代替龙进入 Shadow DOM 城堡！

最后，您可以将数据添加到全局范围内并且可以访问它，因为窗口对象是共享的，而不是原始对象的某种副本。

【讨论】：