Re: [webcomponents] calling JS on custom element construction

The answer depends a bit on the particular implementation of
HTMLElementElement (aka <element>) that you are using. The spec is behind
the various discussions on this topic, so the implementations vary.

Our main polyfill <https://github.com/toolkitchen/CustomElements> for
HTMLElementElement
adds a method called *register* to HTMLElementElement that allows you to
specify a custom prototype for your custom element. If you add a *
readyCallback* method on that prototype, it will be called when your custom
element is instanced.

For example,

  <element name="x-foo">
    <script>
      this.register({
        prototype: {
          readyCallback: function() {
            this.textContent = 'Hello World';
          }
        }
      });
    </script>
  </element>

Note that in this version of the polyfill <template> is not instanced for
you at all, so you in fact need to do that yourself in your readyCallback.
Specifically,

  <element name="x-foo">
    <template>
      Hello World
    </template>
    <script>
      var template = this.querySelector("template");
      this.register({
        prototype: {
          readyCallback: function() {
            // YMMV depending on your platform's interpretation of
<template>
            this.innerHTML = template.innerHTML;
          }
        }
      });
    </script>
  </element>

If you want to be free of all such worries, you can try the higher level
code under the toolkit <https://github.com/toolkitchen/toolkit>repository,
but it's even more bleeding edge.

HTH,
Scott


On Wed, Mar 20, 2013 at 9:46 AM, Mike Kamermans <nihongo@gmail.com> wrote:

> 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
>
>