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
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>
 
By setting the properties on HTMLElementElement, author can register a series of lifecycle hooks for the registered element.
There are two types of lifecycle event: <tt>create</tt> and <tt>init</tt>. The <tt>create</tt> is for creating the new instance of the <tt>Element</tt>.
You can override the constructor of the element by providing <tt>create</tt> callback.
The <tt>init</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> block inside an <tt>element</tt> element.
 
<pre>
 
<head>
  <element for="x-comment">
    <script>
      class Comment : HTMLElement {
          HTMLElement.call(this);
          this.shadow = new ShawowRoot(this);
          ..;
      }
 
      this.create = Comment;
      this.init = function(element) { element.init(); };
    </script>
  </element>
</head>
 
</pre>
 
In this example, the script refers <tt>this</tt>, which points the enclosing <tt>element</tt> element.
This example also shows how we can provide an <tt>create</tt> lifecycle callback.
 
* TODO: What is the context of the script block? Is the "Comment" class visible globally? How to explain that?
* TODO: How to define "constructor" semantics using WebIDL?
* TODO: Is it possible to define a new element without subclassing?
 
== Styling ==
 
The <tt>element</tt> element allows a <tt>style</tt> element as a child.
This <tt>style</tt> is part of the document stylesheet.
 
<pre>
 
<head>
  <element for="x-comment">
    <style>
    x-comment {
      color: gray;
    }
    </style>
  </element>
</head>
 
</pre>


= Shadow DOM Template =
= Shadow DOM Template =

Revision as of 20:09, 26 October 2011

Element Registration

Moved to Component_Model_Strawman:_Element_Registration

Shadow DOM Template

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


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

A template is instantiated through

  • ShadowRoot constructor and
  • shadow-template CSS property.

The ShadowRoot constructor

The ShadowRoot constructor accepts a template element to instantiate. 

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

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.

The Instantiation Event and Scripting

Even though the 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 template element generates an instantiation 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. 


<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>

A template element also allows a script element as a child, whose script block can access HTMLTemplateElement.current to refer the enclosing template element. 


<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>

Isolation

Standalone Form

The element registration and template definition are also done in a separate HTML. Effective markup vocabulary for the defining HTML is limited. Agents only recognize a head element as a child of the root element when the HTML document is loaded as required. 


<html>
  <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>

The standalone definition can be done by a script file. 


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

This is equivalent to linking to a HTML file of like: 


<html provide>
  <head>
    <script type=”text/javascript” src="comment.js"></script>
  </head>
</html>

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 document.

Isolated definition

If the rel attribute contains the term isolate, the linked HTML is loaded as a separate document object. The script inside the document is given a separate global object.

For the host document, there is no way to access the loaded document directly. 


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

RolandSteiner Should we make isolate an attribute on link rather than a rel value? As Dimitri mentioned, this could be useful in general and would allow us to branch it off into a separate spec.

Morrita Any declarative syntax is a part of other spec. This is cross-cutting view of multiple proposals. moved out confined declaration to standalone attribute. I have no idea how this works for other types of linked resources though.

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