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: Isolation: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
= Overview = | = Overview = | ||
= Loading an External HTML Resource = | = Loading an External HTML Resource = | ||
The element registration and template definition also can be done in an external, separate HTML resource. | |||
Author can define a set of elements inside the external HTML and use it in different HTML pages. | |||
Effective markup vocabulary for the external HTML is limited. | |||
Effective markup vocabulary for the | |||
Agents only recognize the first <tt>head element</tt> and its descendant. | Agents only recognize the first <tt>head element</tt> and its descendant. | ||
| Line 13: | Line 13: | ||
<html> | <html> | ||
<head> | <head> | ||
<element | <element name="x-comment">..</element> | ||
</head> | </head> | ||
</html> | </html> | ||
| Line 19: | Line 19: | ||
</pre> | </pre> | ||
The host | == The host document == | ||
The document which hosts an external HTML file is called a "host document". | |||
Any HTML document can host be a host document. | |||
If author add a <tt>link</tt> element with its <tt>rel</tt> attribute set to <tt>component</tt> to a apge, | |||
the page hosts the linked HTML resource. | |||
In this example, the document hosts <tt>comment.html</tt>. | |||
<pre> | <pre> | ||
| Line 40: | Line 48: | ||
<head> | <head> | ||
<link rel=”component” type=”text/html” href="comment.html" confined> | <link rel=”component” type=”text/html” href="comment.html" confined> | ||
</head> | |||
</html> | |||
</pre> | |||
= Shared Hosting = | |||
If an author hosts an external HTML without specifying <tt>confined</tt> attribute, | |||
the HTML is hosted as a shared resource. | |||
That means, agents insert <tt>head</tt> children of the hosted document | |||
into the host document's <tt>head</tt>. | |||
Each script execution inside hosted HTML shares the global object with its host document. | |||
In this example, the host document eventually has an <tt>element</tt> element named <tt>x-comment</tt>. | |||
<pre> | |||
<!-- comment.html --> | |||
<html> | |||
<head> | |||
<element name="x-comment">..</element> | |||
</head> | |||
</html> | |||
<!-- host document --> | |||
<html> | |||
<head> | |||
<link rel=”component” type=”text/html” href="comment.html"> | |||
<script> | |||
var shouldNotNull = document.querySelector("element[name=x-comment]"); | |||
</script> | |||
</head> | </head> | ||
</html> | </html> | ||
</pre> | </pre> | ||
Revision as of 17:48, 28 October 2011
Overview
Loading an External HTML Resource
The element registration and template definition also can be done in an external, separate HTML resource. Author can define a set of elements inside the external HTML and use it in different HTML pages.
Effective markup vocabulary for the external HTML is limited. Agents only recognize the first head element and its descendant.
<html>
<head>
<element name="x-comment">..</element>
</head>
</html>
The host document
The document which hosts an external HTML file is called a "host document". Any HTML document can host be a host document.
If author add a link element with its rel attribute set to component to a apge, the page hosts the linked HTML resource.
In this example, the document hosts comment.html.
<html>
<head>
<link rel=”component” type=”text/html” href="comment.html">
</head>
</html>
The confined attribute
Author can add the confined attribute to confine the component definition.
<html>
<head>
<link rel=”component” type=”text/html” href="comment.html" confined>
</head>
</html>
If an author hosts an external HTML without specifying confined attribute, the HTML is hosted as a shared resource. That means, agents insert head children of the hosted document into the host document's head. Each script execution inside hosted HTML shares the global object with its host document.
In this example, the host document eventually has an element element named x-comment.
<!-- comment.html -->
<html>
<head>
<element name="x-comment">..</element>
</head>
</html>
<!-- host document -->
<html>
<head>
<link rel=”component” type=”text/html” href="comment.html">
<script>
var shouldNotNull = document.querySelector("element[name=x-comment]");
</script>
</head>
</html>