Question

我在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（{...}）函数。按钮也在我的影子dom深处，所以看起来这就是问题所在。请帮我找一下如何从shadow-dom调用一个函数

Answer 1

您可以从“外部”访问shadow-dom元素，如下所示：

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

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

此代码不需要聚合物。请注意，'shadowRoot'和'querySelector'方法可能无法在每个浏览器中使用。使用聚合物方法可能有更好的解决方案。

Answer 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;
});

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

2 个答案: