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
| Line 91: | Line 91: | ||
= Isolation = | = Isolation = | ||
Moved to [[Component_Model_Strawman:_Isolation]] | Moved to [[Component_Model_Strawman:_Isolation]] | ||
Revision as of 21:12, 27 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
Moved to Component_Model_Strawman:_Isolation