如何使用“ is”扩展本机DOM元素？

Question

我正在尝试使用自定义元素规范使用“ is”属性来扩展本机DOM元素 ，但它似乎根本没有做任何事情。 我使用的是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一样的纯值。

您在“ 添加JS属性和方法 ”中找到的文章中也提到了这一点：

当然，有成千上万种方法来构建原型。 如果您不喜欢创建这样的原型，那么这是同一件事的更简洁的版本：

[…] [此]第一种格式允许使用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

您似乎忘记了告诉Web组件它extends了本机img元素。 这是一个根据您的小提琴而运行的示例，但细化为重要内容： http : //jsbin.com/OMaPIVoV/7/edit

希望这可以帮助！