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
mNo edit summary
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
= Element Registration =
= Element Registration =


Let’s start from the minimum form of the element registration.
Moved to [[Component_Model_Strawman:_Element_Registration]]
Authors can use an <tt>element</tt> element to registering new element name.
Now agent recognizes <tt>x-comment</tt> as <tt>HTMLRegisteredElement</tt>.
This is just a plain old HTML element which has its own name.
 
<pre>
 
<head>
  <element for="x-comment"></element>
</head>
 
</pre>
 
== Scripting ==
 
The <tt>element</tt> 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  <tt>HTMLElementElement.register()</tt>, authors can register a set of lifecycle callbacks for each registered element.
There are two types of lifecycle event: <tt>open</tt> and <tt>close</tt>. The open is for creating the new instance of the <tt>Element</tt>.
You can override the constructor of the element by providing <tt>open</tt> callback.
The <tt>close</tt> 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 a <tt>script</tt> blocks inside an <tt>element</tt> 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 static property called <tt>HTMLElementElement.current</tt>,
which points the enclosing <tt>element</tt> element.
This example also shows how we can provide an <tt>open</tt> lifecycle callback.
 
== Styling ==
 
The <tt>element</tt> element allows a <tt>style</tt> element as a child,
which accept <tt>:current</tt> pseudo-class to specify the registering element.
 
Following example gives "color: gray" to the <tt>x-comment</tt> element.
 
<pre>
 
<head>
  <element for="x-comment">
    <style>
    :current {
      color: gray;
    }
    </style>
  </element>
</head>
 
</pre>
 
= Shadow DOM Template =
 
An initial shape of new shadow tree can be defined using a <tt>template</tt> element.
 
<pre>
 
<head>
  <template id=”comment-template”>
    <div><content></content></div>
  </template>
</head>
 
</pre>
 
A <tt>template</tt> is instantiated through
 
* <tt>ShadowRoot</tt> constructor and
* <tt>shadow-template</tt> CSS property.
 
== The ShadowRoot constructor ==
 
The <tt>ShadowRoot</tt> constructor accepts a <tt>template</tt> element to instantiate.
 
<pre>
  ..
  this.shadow = new ShadowRoot(this, document.getElementById(“comment-template”));
  ..
</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.
 
== The Instantiation Event and Scripting ==
 
Even though the <tt>template</tt> 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 <tt>template</tt> element generates an <tt>instantiation</tt> event for
each template instantiation. Authors can listen it to setup event handlers for
generated elements by the template. The event doesn't bubble, and it isn't cancelable.
 
<pre>
 
<head>
  <template id=”comment-template”>
    <div><content></content></div>
  </template>
  <script>
  var e = document.getElementById("comment-template");
  e.addEventListener("instantiation", function(evt) {
    evt.root.querySelector("div").addEventListener("click", function(evt) { ... });
  });
  </script>
</head>
 
</pre>
 
A <tt>template</tt> element also allows a <tt>script</tt> element as a child,
whose script block can access <tt>HTMLTemplateElement.current</tt> to refer the enclosing <tt>template</tt> element.
 
<pre>
 
<head>
  <template id=”comment-template”>
    <div><content></content></div>
    <script>
    HTMLTemplateElement.current.addEventListener("instantiation", function(evt) {
      evt.root.querySelector("div").addEventListener("click", function(evt) { ... });
    });
    </script>
  </template>
</head>
 
</pre>


= Isolation =
= Isolation =


== Standalone Form ==
Moved to [[Component_Model_Strawman:_Isolation]]
 
The element registration and template definition are also done in a separate HTML.
Each HTML file which provides the element registration should have a <tt>provide</tt> 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 <tt>link</tt> element with its <tt>rel</tt> attribute set to <tt>component</tt>.
 
<pre>
 
<html>
  <head>
    <link rel=”component” type=”text/html” href="comment.html">
  </head>
</html>
 
</pre>
 
=== Shared definition ===
 
In the default, these definitions are coming into the host document.
That means a providing HTML doesn’t have its own document nor the global object. Agents use these of the host.
 
Effective markup vocabulary for 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.
 
 
=== Isolated definition ===

Latest revision as of 21:12, 27 October 2011

Element Registration

Moved to Component_Model_Strawman:_Element_Registration

Isolation

Moved to Component_Model_Strawman:_Isolation

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