1

我正在尝试使用自定义元素规范来使用“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 永远不会触发。关于如何做到这一点的任何想法？

4

2 回答 2

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

Object.create确实创建了一个属性描述符映射作为其第二个参数 - 不是普通值 - 就像这样Object.defineProperties做。

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

当然，有无数种方法可以构建原型。如果你不喜欢创建这样的原型，这里有一个更精简的版本：

[…] [This] 第一种格式允许使用 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() { … } }
  })
});
于 2014-01-28T18:32:20.617 回答
1

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

希望这可以帮助！

于 2014-06-03T12:38:17.777 回答