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
No edit summary
No edit summary
Line 22: Line 22:
<!-- Markup API -->
<!-- Markup API -->
<head>
<head>
   <element for="x-comment"></element>
   <element name="x-comment"></element>
</head>
</head>


Line 39: Line 39:


<head>
<head>
   <element for="x-comment">
   <element name="x-comment">
     <script>
     <script>
     var shouldBeXComment = this.name;
     var shouldBeXComment = this.name;
Line 68: Line 68:
<!-- Markup API -->
<!-- Markup API -->
<head>
<head>
   <element for="x-comment">
   <element name="x-comment">
     <script>
     <script>
     this.create = function() { return new HTMLElement("x-comment"); };
     this.create = function() { return new HTMLElement("x-comment"); };
Line 83: Line 83:


<!-- Markup 1 -->
<!-- Markup 1 -->
   <element for="x-comment">
   <element name="x-comment">
     <script>
     <script>
     class Comment : HTMLElement {
     class Comment : HTMLElement {
Line 94: Line 94:


<!-- Markup 2 -->
<!-- Markup 2 -->
   <element for="x-comment">
   <element name="x-comment">
     <script>
     <script>
     class Comment : HTMLElement {
     class Comment : HTMLElement {
Line 142: Line 142:
<!-- Markup API -->
<!-- Markup API -->
<head>
<head>
   <element for="x-comment">
   <element name="x-comment">
     <script>
     <script>
     ...
     ...
Line 176: Line 176:


<head>
<head>
   <element for="x-comment">
   <element name="x-comment">
     <style>
     <style>
     x-comment {
     x-comment {
Line 198: Line 198:
<!-- Markup API -->
<!-- Markup API -->
<head>
<head>
   <element for="x-comment">
   <element name="x-comment">
     <template>
     <template>
       <div>...</div>
       <div>...</div>

Revision as of 20:25, 26 October 2011

Overview

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

The element element and 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");
element.name = "x-comment";
document.head.appendChild(element);
// Shorter form.
HTMLRegistrationElement.register("x-comment");

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

Scripting

The script element

The element element allows script elements in its children. These script blocks are invoked as a function, whose receiver(this) is bound to enclosing element element. These script blocks can be used for providing lifecycle callback definitions for the registering element. 


<head>
  <element name="x-comment">
    <script>
     var shouldBeXComment = this.name;
    <script>
  </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");
element.name = "x-comment";
element.create = function() { return new HTMLElement("x-comment"); };
document.head.appendChild(element);
// Shorter form.
HTMLRegistrationElement.register("x-comment", function() { ... });

<!-- Markup API -->
<head>
  <element name="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 markup and one imperative examples have same meaning. 


<!-- Markup 1 -->
  <element name="x-comment">
    <script>
    class Comment : HTMLElement {
       ....
    };

    this.create = Comment;
    </script>
  </element>

<!-- Markup 2 -->
  <element name="x-comment">
    <script>
    class Comment : HTMLElement {
       ....
    };

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

// Imperative
class Comment : HTMLElement {
  ...
};

HTMLRegistrationElement("x-comment", Comment);

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


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

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 attributes and child elements for the element are already set by the agent. So this callback is useful for building its visual like the shadow tree. 


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

<!-- Markup API -->
<head>
  <element name="x-comment">
    <script>
     ...
     this.setup = function() {
       // "this" points the newly created element instance.
       this.shadow = new ShadowRoot(this); 
       ...;
     };
    </script>
  </element>
</head>

If no setup callback is given by the author, agent invokes the default behavior. It is something like this: 

function defaultSetup() {
  if (this.setup instanceof Function)
    this.setup();
}

Styling

The element element also allows the style element as its children. The style given by the element is a part of document stylesheet. Authors can use the style element to provide the style for the registering element. 



<head>
  <element name="x-comment">
    <style>
    x-comment {
       color: gray;
    }
    </style>
  </element>
</head>

Shadow Tree construction

The element element helps to construct a shadow tree for newly created elements. If element element has a template element as its child, The agent creates shadow tree from the template element before invoking the setup callback, then invokes it with the shadow root. 


<!-- Markup API -->
<head>
  <element name="x-comment">
    <template>
      <div>...</div>
    </template>
    <script>
     ...
     this.setup = function(shadow) {
       // setup using the shadow instance.
     };
    </script>
  </element>
</head>

HTMLRegistrationElement interface

[Callback=AcceptConstructor]
interface HTMLRegistrationCreateCallback {
 HTMLElement create();
}:

[Callback]
interface HTMLRegistrationSetupCallback {
 void setup(ShadowRoot shadow = null);
}:

[Constructor]
interface HTMLRegistrationElement {
  attribute String name;
  attribute HTMLRegistrationCreateCallback create;
  attribute HTMLRegistrationSetupCallback setup;
};
Retrieved from "https://wiki.whatwg.org/index.php?title=Component_Model_Strawman:_Element_Registration&oldid=7473"