如何使用“is”扩展原生DOM元素？ [英] How to extend native DOM elements using "is"?

问题描述

我正在尝试使用自定义元素规范扩展原生DOM元素使用is属性，但它似乎根本没有做任何事情。我正在使用Google Canary，因此我可以创建自定义元素，但在扩展方面没有效果。

I am trying to using the custom elements spec to extend native DOM elements using the "is" attribute, but it doesn't seem to be doing anything at all. I am using Google Canary so I am able to create custom elements, but no effect in extending.

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

In my sample, I am trying to add a caption to the native img tag:

<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永远不会触发。关于如何实现这一点的任何想法？

The createdCallback never fires. Any ideas on how to accomplish this?

推荐答案

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

looks like you forgot to tell your web component, that it extends the native img element. Here's a running example based on your fiddle but broken down to the important bits: http://jsbin.com/OMaPIVoV/7/edit

希望这会有所帮助！

这篇关于如何使用“is”扩展原生DOM元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！