A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Component Model Strawman: Element Registration: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
(Created page with '= Overview = With the Element Registration. page authors can tell new element names and its behavior to agents. == HTMLRegistrationElement == The <tt>HTMLRegistrationElement<...')
 
Line 40: Line 40:
var element = document.createElement("element");
var element = document.createElement("element");
var element.name = "x-comment";
var element.name = "x-comment";
var element.create = function() { return new HTMLElement("x-comment"); }
var element.create = function() { return new HTMLElement("x-comment"); };
document.head.appendChild(element);
document.head.appendChild(element);
// Shorter form.
// Shorter form.
Line 95: Line 95:
     var element = this;
     var element = this;
     this.create = function() { return new HTMLElement(element.name); }
     this.create = function() { return new HTMLElement(element.name); }
    </script>
  </element>
</head>
</pre>
=== The <tt>setup</tt> callback ===
The second lifecycle callback, <tt>setup</tt> is called after an instance creation.
If the instance is created by the agent's tree construction, it will be called as a part of the "close" phase.
On <tt>setup</tt>, the element attribute and child elements are already set by the agent.
So it can be useful for creating its visual like the shadow tree.
<pre>
// Imperative API
var element = document.createElement("element");
...
var element.setup = function() { this.shadow = new ShadowRoot(this); ...; };
...
<!-- Markup API -->
<head>
  <element for="x-comment">
    <script>
    ...
    this.setup = function() {
      // "this" points the newly created element instance.
      this.shadow = new ShadowRoot(this);
      ...;
    };
     </script>
     </script>
   </element>
   </element>

Revision as of 17:46, 26 October 2011

Overview

With the Element Registration. page authors can tell new element names and its behavior to agents.

HTMLRegistrationElement

The HTMLRegistrationElement represents an author-registered element definition.

Here is the simplest example which registeres an element named "x-comment" whose instance implements HTMLElement 


// Imperative API
var element = document.createElement("element");
var element.name = "x-comment";
document.head.appendChild(element);
// Shorter form.
HTMLRegistrationElement.register("x-comment");

<!-- Markup API -->
<head>
  <element for="x-comment"></element>
</head>

The create callback

The HTMLRegistrationElement provide a pair of lifecycle callbacks for the element instance creation including the tree construction.

The first callback, create is invoked when an agent need a new element instance of the registered element. create callback should return new element instance which matches the registered element specification. 


// Imperative API
var element = document.createElement("element");
var element.name = "x-comment";
var element.create = function() { return new HTMLElement("x-comment"); };
document.head.appendChild(element);
// Shorter form.
HTMLRegistrationElement.register("x-comment", function() { ... });

<!-- Markup API -->
<head>
  <element for="x-comment">
    <script>
    this.create = function() { return new HTMLElement("x-comment"); }
    </script>
  </element>
</head>

If the callback function has HTMLElement in its prototype chain, it is invoked as a constructor. Thus following two example has same meaning. 


<head>
  <element for="x-comment">
    <script>
    class Comment : HTMLElement {
       ....
    };
    this.create = Comment;
    </script>
  </element>
</head>

<head>
  <element for="x-comment">
    <script>
    class Comment : HTMLElement {
       ....
    };

    this.create = function() { return new Comment(); }
    </script>
  </element>
</head>

If no create callback is given, its default behavior is something like this: 


<head>
  <element for="x-comment">
    <script>
    var element = this;
    this.create = function() { return new HTMLElement(element.name); }
    </script>
  </element>
</head>

The setup callback

The second lifecycle callback, setup is called after an instance creation. If the instance is created by the agent's tree construction, it will be called as a part of the "close" phase. On setup, the element attribute and child elements are already set by the agent. So it can be useful for creating its visual like the shadow tree. 


// Imperative API
var element = document.createElement("element");
...
var element.setup = function() { this.shadow = new ShadowRoot(this); ...; };
...

<!-- Markup API -->
<head>
  <element for="x-comment">
    <script>
     ...
     this.setup = function() {
       // "this" points the newly created element instance.
       this.shadow = new ShadowRoot(this); 
       ...;
     };
    </script>
  </element>
</head>
Retrieved from "https://wiki.whatwg.org/index.php?title=Component_Model_Strawman:_Element_Registration&oldid=7436"