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

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 的深处，所以看起来这就是问题所在。请帮我找到如何从阴影中调用函数-dom

Answer 1

您可以像这样从 "outside" 访问 shadow-dom 元素：

首先：给你的纸按钮一个id属性：<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>

JavaScript 在光中 DOM

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

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

How to call a function from inside nested components

javascript

web-component

shadow-dom

polymer