Question

我正在尝试使用“is”属性将自定义元素规范用于extend native DOM elements，但它似乎根本没有做任何事情。我正在使用Google Canary，因此我可以创建自定义元素，但不会影响扩展。

在我的示例中，我正在尝试为原生img标记添加标题：

<img is="super-img" src="http://lorempixel.com/400/200/" 
  caption="This is my custom caption!" />

<script>
  document.registerElement('super-img', {
    prototype: Object.create(HTMLImageElement.prototype, {
      createdCallback: function() {
        var caption = this.attributes.getNamedItem('caption').value;
        alert(caption);
      }
    })
  });
</script>

http://jsbin.com/OMaPIVoV/3/

createdCallback永远不会触发。关于如何实现这一目标的任何想法？

Answer 1

Object.create(HTMLImageElement.prototype, {
    createdCallback: function() {…}
})

Object.create会创建一个属性描述符的地图作为其第二个参数 - 而不是像Object.defineProperties那样的普通值。

the article you found at "Adding JS properties and methods"中也提到了这一点：

当然，有数千种方法可以构建原型。如果   你不是这样创造原型的粉丝，这里有更多   浓缩版同样的东西：

[...] [这]第一种格式允许使用ES5 Object.defineProperty。   ~~第二个允许使用get/set。~~

（罢工是我添加的，因为它是垃圾）

所以你想要的是

var SuperImgProto = Object.create(HTMLImageElement.prototype);
SuperImgProto.createdCallback = function() { … };
var SuperImg = document.registerElement('super-img', {prototype: SuperImgProto});

或

document.registerElement('super-img', {
  prototype: Object.create(HTMLImageElement.prototype, {
    createdCallback: {value: function() { … } }
  })
});

Answer 2

看起来您忘了告诉您的网络组件，它是extends本机img元素。这是一个基于你的小提琴的运行示例，但细分为重要部分：http://jsbin.com/OMaPIVoV/7/edit

希望这有帮助！

如何使用＆＃34;扩展原生DOM元素是＆＃34;？

2 个答案: