Extending native HTML Elements with Polymer

dom, html, polymer, web-component

Solution

This works properly if, instead of referring to the element as `<extended-item>`, you instead use `<div is="extended-item">`.

Here's an example (jsbin):

<polymer-element name="extended-item" extends="div">
  <template>
    <p>This is part of the template.</p>
    <content></content>
  </template>

  <script>
    Polymer('extended-item', {
      created: function() {
        console.log('EXTENDED ITEM IS CREATED!');
      },
      ready: function() {
        console.log('EXTENDED ITEM IS READY!');
      },
      attached: function() {
        console.log('EXTENDED ITEM IS ATTACHED!');
      },
      domReady: function() {
        console.log('EXTENDED ITEMS DOM IS READY!');
      },
      detached: function() {
        console.log('EXTENDED ITEM IS DETACHED!');
      },
      attributeChanged: function (attrName, oldVal, newVal)
      {
        //var newVal = this.getAttribute(attrName);
        console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
      }
    });
  </script>
</polymer-element>

<div is="extended-item">I was extended from div!</div>

EDIT: As pointed out in this comments, this is expected behavior, documented in the Custom Elements spec.

Problem

Hi i'd like to extend from a native HTML Element with Polymer for creating a custom web component. My polymer ready-callback is getting called, when i'm not extending. As soon as i extend, nothing gets called anymore. Though the shadow DOM for the element is being created... Here is my code for the usage: ``` <!DOCTYPE html> <html> <head> <title>Custom Component Usage</title> <script src="bower_components/platform/platform.js"></script> <link rel="import" href="elements/extended-item.html"> </head> <body> <extended-item>I was extended from div!</extended-item> </body> </html> ``` Custom Element, which extends div: ``` <link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="extended-item" extends="div"> <template> <content></content> </template> </polymer-element> <script> Polymer('extended-item', { created: function () { console.log('EXTENDED ITEM IS CREATED!'); }, ready: function () { console.log('EXTENDED ITEM IS READY!'); }, attached: function () { console.log('EXTENDED ITEM IS ATTACHED!'); }, domReady: function () { console.log('EXTENDED ITEMS DOM IS READY!'); }, detached: function () { console.log('EXTENDED ITEM IS DETACHED!'); }, attributeChanged: function (attrName, oldVal, newVal) { //var newVal = this.getAttribute(attrName); console.log(attrName, 'old: ' + oldVal, 'new:', newVal); } }); </script> ``` Any idea? thanks in advance, Rob

Original source