1

単純なカスタム要素を作成していますが、別のファイルからインポートしたいと考えています。同じファイルにある場合tは正しいhtml要素を与えていますが、外部ファイルにある場合はundefined. これが私のindex.htmlファイルです：

<!DOCTYPE html>  
<html lang="en">  
  <head>
    <meta charset="utf-8">
    <link rel="import" href="example-container.html">
  </head>
  <body>
    <example-container></example-container>
  </body>
</html>

そしてexample-container.html：

<template id="example-container">
    <style>
    </style>
</template>
<script>  
    // Make sure you extend an existing HTMLElement prototype
    var ExampleContainerProto = Object.create(HTMLElement.prototype);

    //var t = document.querySelector('#example-container');

    // Setup optional lifecycle callbacks
    ExampleContainerProto.createdCallback = function() {
        var t = document.querySelector('#example-container');
        console.log(t);
    };
    var ExampleContainer = document.registerElement('example-container', {prototype: ExampleContainerProto});
</script>

t私の別のアプローチは、次のようにグローバル スコープで定義することでした。

var t = document.querySelector('#wizard-container');
WizardContainerProto.createdCallback = function() {
    console.log(t);
...

それはうまくいきますが、グローバルスコープにゴミを残したくありません。

4

1 に答える 1