Question

我正在尝试创建一个自定义的html元素，并将其实例化传递给一些自定义数据标记。问题是它的数据集总是空的，我无法弄清楚我做错了什么。我在自定义元素的MDN上关注example ..此示例在我的浏览器中有效..此外，当我在页面上添加标准img时，我可以成功传递自定义数据标记，但不是当我使用我的自定义html元素时。

下面是我的js文件（在MyImage.js中定义）和我的html文件。这旁边是一张名为small.jpg的图片。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 1

更新代码以从DOM实例化获取以下属性

img.alt = this.getAttribute('data-name');
img.src = this.getAttribute('data-img');

Answer 2

如果我更改加载脚本的位置，则代码段有效。如果我将脚本元素放在正文的末尾，示例工作正常。请参阅以下代码段：

// 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>

所以现在我的问题变成：为什么？我知道脚本声明/引用的位置会影响它在页面中加载的时间，但有没有人确切知道这里发生了什么导致它在实例化我的自定义元素时没有正确传递自定义属性？

自定义元素数据属性不起作用

2 个答案: