[webcomponents] calling JS on custom element construction

Hey all,

still playing with web components, I was wondering if there's a way to
make a custom element trigger JS whenever an element is built either
through JS calls or when used in the DOM. From the spec, combined with
the toolkitchen polyfills, I can see that the element's <script> block
runs once, when the element gets defined, so I figured I could use an
explicit constructor instead and make things work that way:


var MyCustomElement = function() { console.log("element built"); }

<element name="my-custom-element" constructor="MyCustomElement">
  <template>
      <content></content>
  </template>
</element>

but this does not appear to call the MyCustomElement constructor when
the element is built through the DOM by virtue of just "being used on
a page", and when called on the console with "new MyCustomElement();"
I get the error "TypeError: Object #<HTMLDivElement> has no method
'instantiate'"... If I use "MyCustomElement.prototype = new
HTMLDivElement()" to try to set up a sensible prototype chain, I just
get the error "Uncaught TypeError: Illegal constructor"./

What's the recommended way to set up a custom element that runs some
JS or calls a JS function any time such an element is built for use on
the page?

- Mike "Pomax" Kamermans

Received on Wednesday, 20 March 2013 16:46:44 UTC