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
 
(One intermediate revision by the same user not shown)
Line 2: Line 2:


Moved to [[Component_Model_Strawman:_Element_Registration]]
Moved to [[Component_Model_Strawman:_Element_Registration]]
= 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]]
Moved to [[Component_Model_Strawman:_Isolation]]
== 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 <tt>rel</tt> attribute contains the term <tt>isolate</tt>, 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.
<pre>
<html>
  <head>
    <link rel=”component” type=”text/html” href="comment.html" confined>
  </head>
</html>
</pre>
[[User:Rolandsteiner|RolandSteiner]] Should we make <tt>isolate</tt> an attribute on <tt>link</tt> rather than a <tt>rel</tt> value? As Dimitri mentioned, this could be useful in general and would allow us to branch it off into a separate spec.
[[User:Morrita|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.

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"