如何从嵌套组件内部调用函数答案

【问题标题】：How to call a function from inside nested components如何从嵌套组件内部调用函数
【发布时间】：2015-03-20 08:55:56
【问题描述】：

我在 index.html 中有这段代码：

<core-pages selected="{{welcomPage}}">
  <div class="blueBackground">
    <h1>asd</h1>
    <h3>asd</h3>
    <paper-button on-tap="{{welcomPagePlus}}">
      Keep Going
      <core-icon icon="forward"></core-icon>
    </paper-button>
  </div>
  <div>welcom 2</div>
</core-pages>

我想在用户单击按钮时调用一个函数。我在我的 app.js 中试过这个：

function welcomPagePlus() {
    ...   
}

此聚合物代码位于我的主文件中，因此我无法使用 Polymer({...}) 函数。而且按钮在我的影子域深处，所以看起来这就是问题所在。请帮我找到如何从 shadow-dom 调用函数

【问题讨论】：

标签： javascript polymer web-component shadow-dom

【解决方案1】：

您可以像这样从“外部”访问 shadow-dom 元素：

首先：给你的纸质按钮一个 id-Attribute：<paper-button id="paper-button-id" ...>

var button = document.querySelector("core-pages")
    .shadowRoot
    .querySelector("#paper-button-id");

此代码不需要聚合物。请注意，“shadowRoot”和“querySelector”方法可能不适用于每个浏览器。使用聚合物方法可能会有更好的解决方案。

【讨论】：

【解决方案2】：

您也可以这样做。虽然有时它很有用，但我讨厌穿透阴影边界，如果可以的话，我会避免它。

Codepen example

<link rel="import" href="https://www.polymer-project.org/0.5/components/core-pages/core-pages.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon/core-icon.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-button/paper-button.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icons/core-icons.html">

<paper-button>
  Keep Going
  <core-icon icon="forward"></core-icon>
</paper-button>

<core-pages selected="second">
  <div name="first" class="blueBackground">
    <h1>asd</h1>
    <h3>asd</h3>   
  </div>
  <div name="second">welcome 2</div>
</core-pages>

Light DOM 中的 JavaScript

document.querySelector('paper-button').addEventListener('click', function(e){
  var currentPage = document.querySelector('core-pages');
  currentPage.selected = currentPage.selected == 0 ? 1 : 0;
});

【讨论】：