Custom Elements in Templates

# Randy Buchholz (3 months ago)

Edit: Removed. Wrong forum.

# Isiah Meadows (3 months ago)

You'd have better luck in discourse.wicg.io than here. This is about the ECMAScript spec and JavaScript the language, not anything related to the web platform at large.

# #!/JoePea (a month ago)

This is indeed an ugly problem that I've faced when making Custom Elements. The problem is: in templates, custom elements do not get "upgraded" into their identity. They only get "upgraded" once they are inserted into the live DOM.

The best you can do is make deferred code in your custom element constructor to check for existing property values before overriding them with getters/setters, and make sure to store the already-existing values.

It would also help for your elements to emit a "ready" event, or similar, once the constructor has fired, and consumer code can listen for this event (on a parent element where it has bubbled to) to finally begin using any of the custom element's APIs.

Yes, this is very ugly. I really dislike this about custom elements. But once you learn how to abstract it, then you'll be beyond the problem. Libraries like Polymer, SkateJS, etc, abstract this stuff away, so that if you stick with their recommended APIs, you don't hit the issue.

But yeah, discourse.wicg.io is a good place to ask. Another good place to ask, where all vendors talk about the spec, is github.com/w3c/webcomponents/issues.

All the best,