Web 组件：如何监听 Shadow DOM 加载事件？答案

【问题标题】：Web Component: How to listen to Shadow DOM load event?Web 组件：如何监听 Shadow DOM 加载事件？
【发布时间】：2015-01-30 05:57:23
【问题描述】：

我想在我的自定义元素中加载 Shadow DOM 时执行 JavaScript 代码。我尝试了以下代码，但没有成功

x-component.html:

<template id="myTemplate">
   <div>I am custom element</div>
</template>

<script>
var doc = this.document._currentScript.ownerDocument;
var XComponent = document.registerElement('x-component', {
prototype: Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var root = this.createShadowRoot();
      var template = doc.querySelector('#myTemplate');
      var clone = document.importNode(template.content, true);
      clone.addEventListener('load', function(e) {
        alert('Shadow DOM loaded!');
      });
      root.appendChild(clone);
    }
  }
 })
});
</script>

然后我在另一个html中使用它如下- index.html：

<!doctype html>
<html >
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="x-component.html">
</head>
<body>
    <x-component></x-component>
</body>
</html>

doc 变量在我使用 Polymer webcomponents.js polyfill 时使用，而 polyfill 需要它。

监听 Shadow DOM 的加载事件的正确语法是什么？

【问题讨论】：

一些shadow dom事件是always stopped

标签： html polymer shadow-dom custom-element

【解决方案1】：

AFAIK，实现这一点的唯一方法是使用MutationObserver：

  attachedCallback: {
    value: function() {
      var root = this.createShadowRoot();
      var template = document.querySelector('#myTemplate');
      var clone = document.importNode(template.content, true);

      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if(mutation.addedNodes) { // this is definitely a subject to change
            alert('Shadow is loaded');
          };
        });    
      })
      observer.observe(root, { childList: true });
      root.appendChild(clone);
    }
  }

我很高兴知道是否有更优雅的方式，但现在我使用这个。

实时预览：http://plnkr.co/edit/YBh5i2iCOwqpgsUU6En8?p=preview

【讨论】：