1

我想在自定义元素中加载 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 的加载事件的正确语法是什么？

4

1 回答 1

2

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

于 2015-01-30T12:08:45.457 回答