Specs: Simplify the platform by only having one shadow tree per element.

R=esprehn@chromium.org

Review URL: https://codereview.chromium.org/694613002

examples/radio.sky

@@ -11,32 +11,36 @@ SKY MODULE - radio button and radio button group
 </template>
 <script>
  module.exports = {};
- module.exports.RadioElement = sky.registerElement('radio', class extends Element {
-   constructor () {
-     super();
-     this.addEventListener('click', (event) => this.checked = true);
-     this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radio-shadow').content.cloneNode(true)));
-   }
-   get checked () {
-     return this.hasAttribute('checked');
-   }
-   set checked (value) {
-     if (value)
-       this.setAttribute('checked', '');
-     else
-       this.removeAttribute('checked');
-   }
-   get value () {
-     return this.getAttribute('name');
-   }
-   set value (value) {
-     this.setAttribute('value', value);
-   }
-   attributeChanged(name, oldValue, newValue) {
-     if ((name == 'checked') && (newValue != null))
-       if (this.parentNode instanceof module.exports.RadioGroupElement)
-         this.parentNode.setChecked(this);
-   }
+ module.exports.RadioElement = sky.registerElement({
+   tagName: 'radio',
+   shadow: true,
+   prototype: class extends Element {
+     constructor () {
+       super();
+       this.addEventListener('click', (event) => this.checked = true);
+       this.shadowRoot.appendChild(module.document.findId('radio-shadow').content.cloneNode(true));
+     }
+     get checked () {
+       return this.hasAttribute('checked');
+     }
+     set checked (value) {
+       if (value)
+         this.setAttribute('checked', '');
+       else
+         this.removeAttribute('checked');
+     }
+     get value () {
+       return this.getAttribute('name');
+     }
+     set value (value) {
+       this.setAttribute('value', value);
+     }
+     attributeChanged(name, oldValue, newValue) {
+       if ((name == 'checked') && (newValue != null))
+         if (this.parentNode instanceof module.exports.RadioGroupElement)
+           this.parentNode.setChecked(this);
+     }
+   },
  });
 </script>
 
@@ -47,34 +51,38 @@ SKY MODULE - radio button and radio button group
  </style>
 </template>
 <script>
- module.exports.RadioGroupElement = sky.registerElement('radiogroup', class extends Element {
-   constructor () {
-     super();
-     this.addShadowRoot(new sky.ShadowRoot(module.document.findId('radiogroup-shadow').content.cloneNode(true)));
-   }
-   get value () {
-     let children = this.getChildNodes();
-     for (let child of children)
-       if (child instanceof module.exports.RadioElement)
-         if (child.checked)
-           return child.name;
-     return '';
-   }
-   set value (name) { 
-     let children = this.getChildNodes();
-     for (let child of children)
-       if (child instanceof module.exports.RadioElement)
-         if (child.value == name)
-           child.checked = true;
-   }
-   setChecked(radio) {
-     if (!((radio instanceof module.exports.Radio) && radio.parentNode == this))
-       throw;
-     let children = this.getChildNodes();
-     for (let child of children)
-       if (child instanceof module.exports.RadioElement)
-         if (child != radio)
-           child.checked = false;
-   }
+ module.exports.RadioGroupElement = sky.registerElement({
+   tagName: 'radiogroup',
+   shadow: true,
+   prototype: class extends Element {
+     constructor () {
+       super();
+       this.shadowRoot.appendChild(module.document.findId('radiogroup-shadow').content.cloneNode(true));
+     }
+     get value () {
+       let children = this.getChildNodes();
+       for (let child of children)
+         if (child instanceof module.exports.RadioElement)
+           if (child.checked)
+             return child.name;
+       return '';
+     }
+     set value (name) { 
+       let children = this.getChildNodes();
+       for (let child of children)
+         if (child instanceof module.exports.RadioElement)
+           if (child.value == name)
+             child.checked = true;
+     }
+     setChecked(radio) {
+       if (!((radio instanceof module.exports.Radio) && radio.parentNode == this))
+         throw;
+       let children = this.getChildNodes();
+       for (let child of children)
+         if (child instanceof module.exports.RadioElement)
+           if (child != radio)
+             child.checked = false;
+     }
+   },
  });
 </script>

specs/apis.md

@@ -98,12 +98,10 @@ module 'sky:core' {
     // Returns a new Array and new Attr instances every time.
     Array<Attr> getAttributes(); // O(N) in arguments
 
-    readonly attribute ShadowRoot? shadowRoot; // O(1) // returns the youngest shadow root
-    void addShadowRoot(ShadowRoot root); // O(N) in descendants of argument
+    readonly attribute ShadowRoot? shadowRoot; // O(1) // returns the shadow root
     Array<ContentElement> getDestinationInsertionPoints(); // O(N) in number of insertion points the node is in
 
     virtual void attributeChangeCallback(String name, String? oldValue, String? newValue); // noop
-    virtual void shadowRootChangeCallback(ShadowRoot root); // noop
     // TODO(ianh): does a node ever need to know when it's been redistributed?
   }
   Element createElement(String tagName, Dictionary attributes, ChildArguments... nodes); // O(M+N), M = number of attributes, N = number of nodes plus all their descendants
@@ -111,7 +109,12 @@ module 'sky:core' {
   Element createElement(String tagName, ChildArguments... nodes); // shorthand
   Element createElement(String tagName); // shorthand
 
-  Object registerElement(String tagName, Object interfaceObject); // O(N) in number of outstanding elements with that tag name to be upgraded
+  dictionary ElementRegistration {
+    String tagName;
+    Boolean shadow;
+    Object prototype;
+  }
+  Object registerElement(ElementRegistration options); // O(N) in number of outstanding elements with that tag name to be upgraded
 
   interface Text : Node {
     constructor (String value); // O(1)
@@ -134,10 +137,8 @@ module 'sky:core' {
   }
 
   interface ShadowRoot : TreeScope {
-    constructor (ChildArguments... nodes); // O(N) in number of arguments plus all their descendants
-    readonly attribute Element? host; // O(1)
-    readonly attribute ShadowRoot? olderShadowRoot; // O(1)
-    void removeShadowRoot(); // O(N) in descendants
+    constructor (Element host); // O(1) // note that there is no way in the API to use a newly created ShadowRoot
+    readonly attribute Element host; // O(1)
   }
 
   interface Document : TreeScope {
@@ -162,9 +163,6 @@ module 'sky:core' {
   interface ContentElement : Element {
     Array<Node> getDistributedNodes(); // O(N) in distributed nodes
   }
-  interface ShadowElement : Element {
-    Array<Node> getDistributedNodes(); // O(N) in distributed nodes
-  }
   interface ImgElement : Element { }
   interface IframeElement : Element { }
   interface TElement : Element { }
@@ -267,6 +265,11 @@ module 'sky:modulename' {
     ReturnType method(ArgumentType argumentName1, ArgumentType... allSubsequentArguments);
   }
 
+  dictionary Options {
+    String foo;
+    Integer bar;
+  }
+
   // the module can have properties and methods also
   attribute String Foo;
   void method();
@@ -309,6 +312,7 @@ The following types are available:
 * ``Boolean`` - WebIDL ``boolean``
 # ``Object`` - WebIDL ``object``
 * ``InterfaceName`` - an instance of the interface InterfaceName
+* ``DictionaryName`` - an instance of the dictionary DictionaryName
 * ``Promise<Type>`` - WebIDL ``Promise<T>``
 * ``Array<Type>`` - WebIDL ``sequence<T>``
 * ``Dictionary`` - unordered set of name-value String-String pairs with no duplicate names

specs/markup.md

@@ -172,9 +172,6 @@ that everything of note would be provided by frameworks.
    The select="" attribute gives the selector to use to pick the nodes
    to place in this insertion point; it defaults to everything.
 
-``<shadow>``
- - In a shadow tree, acts as an insertion point for older shadow trees.
-
 ``<img src="foo.bin">``
  - Sky fetches the bits for foo.bin, looks for a decoder for those
    bits, and renders the bits that the decoder returns.