Question

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

Answer 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

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

1 个答案: