如何从 imported html 中的脚本访问 imported html 的元素

Question

我想制作一个自定义元素，它将在 html 导入时自行注册。

自定义-element.html:

<html>
  <...>
  <body>
    <template id="myTemplate">
    </template>
  </body>
  <script src="my-script.js">
</html>

我的-script.js:

let customElementPrototype = Object.create(HTMLElement.prototype);
customElementPrototype.createdCallback = function () {
  // somewhere here i want to access <template> to insert it in element
  // I've tried document.querySelector("#myTemplate") and
  // document.currentScript.ownerDocument.querySelector.querySelector("#myTemplate")
  // they don't work either, result of querySelector is null
}
document.registerElement("custom-element", customElementPrototype);

用法：

<html>
<head>
  <link rel="import" href="custom-element.html">
</head>
<...>

Answer 1

在 createdCallback 中，上下文是 custom-element 而不是 ownerDocument. 您可以通过 createdCallback 中的 console.log(this); 看到这一点，它记录了（来自我的 plunker example):

<div is="custom-element">
</div>

在 my-script.js 中，您可以捕获对 ownerDocument 的引用并在回调中使用它。这将允许您的 custom-element 访问它自己的 DOM 和导入的 HTML 的 DOM。例如

var mainDoc = document.currentScript.ownerDocument;

完整的 my-script.js（script.js 在我的 plunker 中）：

var mainDoc = document.currentScript.ownerDocument;

var CustomElementPrototype = Object.create(HTMLElement.prototype);
CustomElementPrototype.createdCallback = function () {
  console.log(this); //the div 
  //import the contents of the template
  var clone = document.importNode(mainDoc.querySelector('#myTemplate').content, true);
  //append template to div
  this.appendChild(clone);
};

document.registerElement("custom-element", {
    prototype: CustomElementPrototype,
    extends: 'div'
});

结合具有一些默认值的模板（该文档将通过 mainDoc 提供）：

<html>
  <body>
    <script src="script.js"></script>
    <template id="myTemplate">
      hello world
      <br>
      from template
    </template>
  </body>
</html>

然后 HTML 将其全部拉入并使用它：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="import" href="custom-element.html">
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div is="custom-element"></div>
  </body>

</html>

https://plnkr.co/edit/jO3ci8vLxolHhvtGxJQ5

这是一个有用的参考： http://webcomponents.org/articles/introduction-to-html-imports/

如何从 imported html 中的脚本访问 imported html 的元素

How to access elements of imported html from script inside imported html

javascript

web-component