Web Components spec - '({ a: 1 })' - makes 'this.a possible'

Question

In Web Components working draft (section 5.2) I stumbled upon this construct:

<element name="tick-tock-clock">
  <script>
    ({
      tick: function () {
        …
      }
    });
  </script>
</element>

When used this way, I can refer to tick via this (this.tick) - at least within the same script element - see 5.3 for example of this.

What is this construct ({ tick: ... }) called? How it works? Part of which spec is this?

---

Clarification: my question is why this.tick is assumed to work? I cannot reproduce it to work in a browser.

---

Edit: as stated in this email on W3C's webapps mailing list, part of the spec I was refering to is now obsolete, partly becaue of this -> prototype binding I was asking about.

Answer 1

What is this construct ({ tick: ... }) called?

An object initializer.

How it works?

An object initializer is made up of a series of property initializers (name: value). The value in each property initializer is evaluated and then assigned to the property. The value of your tick property is a function, but it could easily be a string, number, another object, whatever.

Part of which spec is this?

The object initializer is from the ECMAScript spec (ECMAScript being the technical name for the standardized language that we all call JavaScript). The current spec is the 5th edition but object initializers were there from the beginning.

The part taking the properties from that object initializer and adding them to the element object is from that very spec, the web components spec. See Section 5.2:

The properties of the last value of the script will be copied to a prototype object created for you. In the above example, <tick-tock-clock> elements will have a tick method.

Answer 2

The Web Components Custom Elements spec has indefinitely shelved the declarative <element> method of defining custom elements for various performance and platform feasibility reasons. Instead you should be using the imperative document.register() DOM API to declare your custom elements, as outlined in the up-to-date spec here: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html

(Note: I am a participant in the working group for this family of specs - of which, implementations are scheduled to land in Chrome and Firefox around the end of 2013)