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

From WHATWG Wiki
Jump to navigation Jump to search
No edit summary
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
= Overview =
= Overview =
The isolated components definition is a <tt>provide</tt> attributed HTML file which is loaded in separate namespace.
It is basically a document loaded by an iframe. But it has different way for communicating with the host document.
See also the "Isolation" section on [[Component_Model_Strawman:_Declarative_Syntax]].


== Terms ==
== Terms ==
Line 13: Line 8:


== Considerations ==
== Considerations ==
To facilitate component isolation:


=== Autonomy ===
=== Autonomy ===
Line 28: Line 21:
The component should be able to apply and filter data and styles passed in as it sees fit.
The component should be able to apply and filter data and styles passed in as it sees fit.


= Approaches =
=== Transparency ===


== Element Registration ==
Whether or not a component is isolated should ideally be transparent to both the component and the hosting DOM.


* XXX: define the element name resolution order.
= Loading an External HTML Resource =


Isolated providing document can register new elements for the host document.  
The element registration and template definition also can be done in an external, separate HTML resource.
But in slightly different way: the lifecycle callbacks including <tt>open</tt> and <tt>close</tt> use  
Author can define a set of elements inside the external HTML and use it in different HTML pages.
<tt>HTMLElementProxy</tt> instead of <tt>HTMLElement</tt>, that means <tt>open</tt> should return
 
an instance of <tt>HTMLElementProxy</tt> and <tt>close</tt> callback receives it as a parameter.
Effective markup vocabulary for the external HTML is limited.
Agents only recognize the first <tt>head element</tt> and its descendant.


<pre>
<pre>


<head>
<html>
  <element for="x-comment">
  <head>
    <script>
    <element name="x-comment">..</element>
      HTMLElementElement.current.open = function() {
   </head>
        var element = return new HTMLElementProxy();
</html>
        element.addEventListener("message", ...);
        return element;
      }});
    </script>
   </element>
</head>


</pre>
</pre>


== HTMLElementProxy ==
== 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.


An element on the host document is represented as a <tt>HTMLElementProxy</tt> object in the isolated document.
In this example, the document hosts <tt>comment.html</tt>.
If an isolated-registered element is built on the host document, a set of lifecycle callback is invoked on the isolated document.
The <tt>open</tt> callback should return an <tt>HTMLElementProxy</tt> object, which is then connected to
associated element on the host document.
Scripts in both document can communicate through the proxy using MessageEvent.


<pre>
<pre>


interface [
<html>
   Constructor()
   <head>
] HTMLElementProxy : EventTarget {
    <link rel=”component” type=”text/html” href="comment.html">
  void postMessage(any message, optional sequence<Transferable> transfer);
  </head>
}
</html>
 
</pre>
 
== The <tt>confined</tt> attribute ==
 
Author can add the <tt>confined</tt> attribute to confine the component definition.
 
<pre>


// Should be implemented by HTMLElement family.
<html>
interface [
  <head>
   Constructor(),
    <link rel=”component” type=”text/html” href="comment.html" confined>
  NoInterfaceObject
   </head>
] HTMLElementHost {
</html>
  void postMessage(any message, optional sequence<Transferable> transfer);
}


</pre>
</pre>


== Isolated ShadowRoot ==
= 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.
 


Shadow Trees for the host document can live in the isolated document.
In this example, the host document eventually has an <tt>element</tt> element named <tt>x-comment</tt>.
The <tt>ShadowRoot</tt> constructor can accept <tt>HTMLElementProxy</tt> instead of <tt>HTMLElement</tt>.


<pre>
<pre>


<head>
<!-- comment.html -->
  <element for="x-comment">
<html>
  <head>
    <element name="x-comment">..</element>
  </head>
</html>
 
<!-- host document -->
<html>
  <head>
    <link rel=”component” type=”text/html” href="comment.html">
     <script>
     <script>
      HTMLElementElement.current.open = function() {
    var shouldNotNull = document.querySelector("element[name=x-comment]");
        var element = return new HTMLElementProxy();
        var shadow = new ShadowRoot(element);
        // Build the shadow tree here...
        return element;
      }});
     </script>
     </script>
   </element>
   </head>
</head>
</html>
 
</pre>
 
= Confined Hosting =
 
If an author hosts an external HTML without specifying <tt>confined</tt> attribute,
the HTML is hosted as a confined resource.
 
A confined resource has its document object. Any scripts inside the confined resource
are run on its own global object.
 
Conceptually, a confined resource is similar to a document in a cross-domain frame.
For example, the script on the confined resource can make a XMLHttpRequest to its own domain, instead of the host domain.
 
<pre>
 
<!-- comment.html -->
<html>
  <head>
    <element name="x-comment">
      <script>
        console.log(document.location.toString()); // prints the url of comment.html
      <script>
    </element>
  </head>
</html>
 
<!-- host document -->
<html>
  <head>
    <link rel=”component” type=”text/html” href="comment.html" confined>
  </head>
</html>


</pre>
</pre>


Isolated <tt>ShadowRoot</tt> objects don't propagate events across two documents.
== Registered Elements in a Confined Resource ==
 
The host document recognize an element name which is registered in the hosting confined documents, not only

Latest revision as of 00:33, 29 October 2011

Overview

Terms

  • Confined: disallow a component from accessing the containing page. Useful when a page does not trust the component or its source.
  • Encapsulated: disallow the containing page from accessing the internals of the component. Useful when a component wants to prevent a page from meddling with it.
  • Isolated: a component that is both confined and encapsulated.

Considerations

Autonomy

Components should be autonomous entities that can be loaded and applied as a single building block. Avoid requiring extensive manipulations on both side of the page <=> component divide.

This will also help in implementing decorators.

Interface

The interface of a component should be minimal and well defined. Embedding pages should not be required (nor able to in the case of encapsulation) to access, or even know about, the internals of a component. Conversely, the function of a component should not depend on being able to access the DOM or any other information of the hosting page that is not provided through an interface.

The component should be able to apply and filter data and styles passed in as it sees fit.

Transparency

Whether or not a component is isolated should ideally be transparent to both the component and the hosting DOM.

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>

Shared Hosting

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>

Confined Hosting

If an author hosts an external HTML without specifying confined attribute, the HTML is hosted as a confined resource.

A confined resource has its document object. Any scripts inside the confined resource are run on its own global object.

Conceptually, a confined resource is similar to a document in a cross-domain frame. For example, the script on the confined resource can make a XMLHttpRequest to its own domain, instead of the host domain. 


<!-- comment.html -->
<html>
  <head>
    <element name="x-comment">
       <script>
         console.log(document.location.toString()); // prints the url of comment.html 
       <script>
    </element>
  </head>
</html>

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

Registered Elements in a Confined Resource

The host document recognize an element name which is registered in the hosting confined documents, not only

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