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: Declarative Syntax: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
(creating the page)
 
No edit summary
Line 1: Line 1:
Stub
= Element Registration =
 
== Embedding Form ==
 
Let’s start from the minimum form of the element registration.
We can use an element element to registering new element name.
Now agent recognizes x-comment as HTMLRegisteredElement.
This is just a plain old HTML element which has its own name.
 
<pre>
 
<head>
  <element for="x-comment"></element>
</head>
 
</pre>
 
The element element also provides an opportunity to give a behavior for the instance of the registered element.
 
<pre>
 
<head>
  <element for="x-comment"></element>
  <script>
  var e = document.head.querySelector(“[for=x-comment]”);
  e.close = function(element) {
    element.addEventListener(“click”, function(evt) {
      ..
    });
  };
  </script>
</head>
 
</pre>
 
Using  HTMLElementElement.register(), authors can register a set of lifecycle callbacks for each registered element.
There are two types of lifecycle event: open and close. The open is for creating the new instance of the Element.
You can override the constructor of the element by providing open callback.
The close callback provides the way to enhance created instance. This is useful when you use given attributes to define the behavior.
 
To make the definition self-contained, we can put script blocks inside an element element.
 
<pre>
 
<head>
  <element for="x-comment">
    <script>
      class Comment : HTMLElement {
          this.shadow = new ShawowRoot(this);
          ..;
      }
 
      HTMLElementElement.current.open = function() { return new Comment(); }});
    </script>
  </element>
</head>
 
</pre>
 
In this example, the script refers a variable called registering, which points the enclosing element element.
This example also shows how we can provide an open lifecycle callback.
 
== Standalone Form ==
 
The element registration is done by separate HTML file, whose registrations goes the host document.
Each HTML file which provides the element registration should have provide attribute on the root html element.
This attribute prevents accidental loading of existing HTML files.
 
<pre>
 
<html provide>
  <head>
    <element for="x-comment">..</element>
  </head>
</html>
 
</pre>
 
The host element can load the html with element definition using a link element with its rel attribute set to component.
 
<pre>
 
<html>
  <head>
    <link rel=”component” type=”text/html” href="comment.html">
  </head>
</html>
 
</pre>
 
A providing HTML doesn’t have its own document nor the global object. Agents use these of the host.
 
Effective markup vocabulary of the providing HTML is limited.
Agents only recognize a head element as a child of the root element when the HTML document is loaded as required.
 
= Shadow DOM Template =
 
An initial shape of new shadow tree can be defined using template element.
 
<pre>
 
<head>
  <template id=”comment-template”>
    <div><content></content></div>
  </template>
</head>
 
</pre>
 
== The ShadowRoot constructor ==
 
The ShadowRoot constructor accepts a template element to instantiate.
 
<pre>
  ..
  this.shadow = new ShadowRoot(this, document.getElementById(“comment-template”));
  ..
</pre>
 
== Scripting on DOM Template ==
 
Even though template can be used to define an extra visual representation for an element,
It would be useful if author can attach  a script for the template-generated shadow tree.
The script element which is direct child of the template element can be used for that purpose.
The script block of the element run as an event handle
<pre>
 
<head>
  <template id=”comment-template”>
    <div><content></content></div>
    <script>
    if (event) {
      event.target.addEventListener(“click”), function(evt) {
        // ..
      });
    }
    <script>
  </template>
</head>
 
</pre>
 
== The shadow-template CSS property  (brainstorming) ==
 
The template for shadow root also can be applied using CSS property.
 
<pre>
 
.comment {
  shadow-template: url(#comment-template);
}
 
</pre>
 
Note that imperatively-applied shadows always supersede shadows from the styling.
Also, there is no way to access style-originated shadows from the scripting environment.

Revision as of 22:46, 24 October 2011

Element Registration

Embedding Form

Let’s start from the minimum form of the element registration. We can use an element element to registering new element name. Now agent recognizes x-comment as HTMLRegisteredElement. This is just a plain old HTML element which has its own name. 


<head>
  <element for="x-comment"></element>
</head>

The element element also provides an opportunity to give a behavior for the instance of the registered element. 


<head>
  <element for="x-comment"></element>
  <script>
  var e = document.head.querySelector(“[for=x-comment]”);
  e.close = function(element) {
    element.addEventListener(“click”, function(evt) {
      ..
    });
  };
  </script>
</head>

Using HTMLElementElement.register(), authors can register a set of lifecycle callbacks for each registered element. There are two types of lifecycle event: open and close. The open is for creating the new instance of the Element. You can override the constructor of the element by providing open callback. The close callback provides the way to enhance created instance. This is useful when you use given attributes to define the behavior.

To make the definition self-contained, we can put script blocks inside an element element. 


<head>
  <element for="x-comment">
    <script>
       class Comment : HTMLElement {
           this.shadow = new ShawowRoot(this);
           ..;
       }

       HTMLElementElement.current.open = function() { return new Comment(); }});
    </script>
  </element>
</head>

In this example, the script refers a variable called registering, which points the enclosing element element. This example also shows how we can provide an open lifecycle callback.

Standalone Form

The element registration is done by separate HTML file, whose registrations goes the host document. Each HTML file which provides the element registration should have provide attribute on the root html element. This attribute prevents accidental loading of existing HTML files. 


<html provide>
  <head>
    <element for="x-comment">..</element>
  </head>
</html>

The host element can load the html with element definition using a link element with its rel attribute set to component. 


<html>
  <head>
    <link rel=”component” type=”text/html” href="comment.html">
  </head>
</html>

A providing HTML doesn’t have its own document nor the global object. Agents use these of the host.

Effective markup vocabulary of the providing HTML is limited. Agents only recognize a head element as a child of the root element when the HTML document is loaded as required.

Shadow DOM Template

An initial shape of new shadow tree can be defined using template element. 


<head>
  <template id=”comment-template”>
    <div><content></content></div>
  </template>
</head>

The ShadowRoot constructor

The ShadowRoot constructor accepts a template element to instantiate. 

  ..
  this.shadow = new ShadowRoot(this, document.getElementById(“comment-template”));
  ..

Scripting on DOM Template

Even though template can be used to define an extra visual representation for an element, It would be useful if author can attach a script for the template-generated shadow tree. The script element which is direct child of the template element can be used for that purpose. The script block of the element run as an event handle 


<head>
  <template id=”comment-template”>
    <div><content></content></div>
    <script>
    if (event) {
      event.target.addEventListener(“click”), function(evt) {
        // ..
      });
    }
    <script>
  </template>
</head>

The shadow-template CSS property (brainstorming)

The template for shadow root also can be applied using CSS property. 


.comment {
  shadow-template: url(#comment-template);
}

Note that imperatively-applied shadows always supersede shadows from the styling. Also, there is no way to access style-originated shadows from the scripting environment.

Retrieved from "https://wiki.whatwg.org/index.php?title=Component_Model_Strawman:_Declarative_Syntax&oldid=7356"