私はカスタムhtml要素を作成し、インスタンス化とともにいくつかのカスタムデータタグを渡そうとしています。問題はそのデータセットが常に空であり、私が間違っていることを理解できないということです。私はexampleのMDNのカスタム要素に従っています。この例は私のブラウザでも動作します..さらに、私のページに標準のimgを追加すると、カスタムデータタグを渡すことができます。素子。カスタム要素のデータ属性が機能しない
以下はMy jsファイル（MyImage.jsで定義されています）と私のhtmlファイルです。横にはsmall.jpgというイメージがあります。私は、スクリプトがロードされている場所を変更した場合、あなたのコードは、DOMのインスタンス化
img.alt = this.getAttribute('data-name');
img.src = this.getAttribute('data-img');
アップデートが動作します。本文の最後にscript要素を置くと、この例は正常に動作します。
// Create a class for the element
class MyImage extends HTMLElement {
constructor() {
// Always call super first in constructor
super();
// Create a dom shadow root
var domShadow = this.attachShadow({mode: 'open'});
// Create a standard img element and set its attributes.
var img = document.createElement('img');
img.alt = this.dataset.name;
img.src = this.dataset.img;
// Add the image to the shadow root.
domShadow.appendChild(img);
}
}
// Define the new element
customElements.define('my-image', MyImage);<html>
<head>
<title>myimage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<my-image data-name="My special image name" data-img="small.jpg"></my-image>
<script src="MyImage.js"></script>
</body>
</html>だから今、私の質問は次のようになります：なぜ下のスニペットを参照してください？私は、スクリプト宣言/参照の場所は、ページにロードされるときに影響を与えますが、私のカスタム要素をインスタンス化するときに、カスタム属性を正しく渡さない原因となっていることを誰かが正確に知っていますか？
ありがとうございますが、どちらもうまくいきません。 my-imageインスタンスには空の属性セットと空のデータセットがあります（これはブラウザデバッガを使用して検証します）。 –
スニペットから、以下のような特性を得るために
class MyImage extends HTMLElement {
constructor() {
// Always call super first in constructor
super();
// Create a dom shadow root
var domShadow = this.attachShadow({mode: 'open'});
// Create a standard img element and set its attributes.
var img = document.createElement('img');
img.alt = this.dataset.name;
img.src = this.dataset.img;
// Add the image to the shadow root.
domShadow.appendChild(img);
}
}
// Define the new element
customElements.define('my-image', MyImage);<html>
<head>
<title>myimage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="MyImage.js"></script>
</head>
<body>
<my-image data-name="My special image name" data-img="small.jpg"></my-image>
</body>
</html>これを「回答」として投稿すると、質問に答えてくれる人がいらっしゃいません。あなたはあなたの質問を編集するか、新しい問題に焦点を当てるために、関連する詳細と新しい質問を投稿する必要があります。 – Mogsdad
urブラウザは何ですか？ – Salman
私はSafariとChrome（Mac）でそれを試していて、両方で同じ結果を得ています。 –
これは私にとってうまくいっています！ （Chrome 61.0.3163.100 windows） – DININDU