如何將函數綁定到Shadow DOM內部的元素？

Question

我正在使用Web組件，並嘗試將click事件綁定到Shadow DOM內部的元素。

1. component.html作為index.html內的<link rel="import" ...>包含在內

<template id="my-element">
    <section>
        <header>
            <content select="h1"></content>
            <button></button>
        </header>
        <content select="div"></content>
    </section>
</template>

2.以后的元素用法：

<my-element>
    <h1>Headline</h1>
    <div>...</div>
</my-element>

3.訪問元素並將功能綁定到它

現在，我想在我的<my-element>內的<button> 添加一個addEventListener() （不幸的是，它已通過#shadow-root隱藏） 。 喜歡：

var elemBtn = document.querySelector('my-element button');
elemBtn.addEventListener('click', function(event) {
    // do stuff
});

但這行不通。 我該如何實現？

Answer 1

您應該能夠在不涉及window對象的情況下執行此操作。 這是一個完整的示例：

<!-- Define element template -->
<template>
  <h1>Hello World</h1>
  <button id="btn">Click me</button>
</template>

<!-- Create custom element definition -->
<script>
  var tmpl = document.querySelector('template');

  var WidgetProto = Object.create(HTMLElement.prototype);

  WidgetProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
    // Grab a reference to the button in the shadow root
    var btn = root.querySelector('#btn');
    // Handle the button's click event
    btn.addEventListener('click', this.fireBtn.bind(this));
  };

  // Dispatch a custom event when the button is clicked
  WidgetProto.fireBtn = function() {
    this.dispatchEvent(new Event('btn-clicked'));
  };

  var Widget = document.registerElement('my-widget', {
    prototype: WidgetProto
  });
</script>

<!-- Use the element -->
<my-widget></my-widget>

<!-- Listen for its click event -->
<script>
  var widget = document.querySelector('my-widget');
  widget.addEventListener('btn-clicked', function() {
    alert('the button was clicked');
  });
</script>

jsbin上的示例

Answer 2

我發現創建一個自定義的createEvent('MouseEvent'); 在<template>里面就能解決問題！

TL; DR http://jsfiddle.net/morkro/z0vbh11v/

---

1.首先，您需要將onclick=""屬性添加到我們的<template>並創建一個自定義事件：

<template id="my-element">
    <section>
        <header>
            <content select="h1"></content>
            <button onclick="callEventOnBtn()"></button>
        </header>
        <content select="div"></content>
    </section>

    <script>
        var btnEvent = document.createEvent('MouseEvent');
        btnEvent.initEvent('oncomponentbtn', true, true);
        var callEventOnBtn = function() {
            window.dispatchEvent(btnEvent);
        };
    </script>
</template>

我在<template>內創建自定義事件，並在以后使用“自定義元素”時自動將其分派到全局window對象。

2.現在，當我們單擊自定義元素上的<button>時，我們可以收聽該事件

window.addEventListener('oncomponentbtn', function(event) {
    // do stuff
});