diff --git a/modules/core/src/compiler/shadow_dom_emulation/content_tag.js b/modules/core/src/compiler/shadow_dom_emulation/content_tag.js index 47fc62836a..c812f22e62 100644 --- a/modules/core/src/compiler/shadow_dom_emulation/content_tag.js +++ b/modules/core/src/compiler/shadow_dom_emulation/content_tag.js @@ -9,7 +9,7 @@ import {NgElement} from 'core/dom/element'; var _scriptTemplate = DOM.createScriptTag('type', 'ng/content') class ContentStrategy { - nodes; + nodes: List; insert(nodes:List){} } @@ -21,19 +21,21 @@ class ContentStrategy { class RenderedContent extends ContentStrategy { beginScript:Element; endScript:Element; - nodes:List; - constructor(el:Element) { - this._replaceContentElementWithScriptTags(el); + constructor(contentEl:Element) { + this._replaceContentElementWithScriptTags(contentEl); this.nodes = []; } + // Inserts the nodes in between the start and end scripts. + // Previous content is removed. insert(nodes:List) { this.nodes = nodes; DOM.insertAllBefore(this.endScript, nodes); this._removeNodesUntil(ListWrapper.isEmpty(nodes) ? this.endScript : nodes[0]); } + // Replaces the content tag with a pair of script tags _replaceContentElementWithScriptTags(contentEl:Element) { this.beginScript = DOM.clone(_scriptTemplate); this.endScript = DOM.clone(_scriptTemplate); @@ -60,7 +62,6 @@ class RenderedContent extends ContentStrategy { */ class IntermediateContent extends ContentStrategy { destinationLightDom:LightDom; - nodes:List; constructor(destinationLightDom:LightDom) { this.destinationLightDom = destinationLightDom; @@ -95,4 +96,4 @@ export class Content { insert(nodes:List) { this._strategy.insert(nodes); } -} \ No newline at end of file +} diff --git a/modules/core/src/compiler/shadow_dom_emulation/light_dom.js b/modules/core/src/compiler/shadow_dom_emulation/light_dom.js index 5f9582f8cf..19cfc9ffda 100644 --- a/modules/core/src/compiler/shadow_dom_emulation/light_dom.js +++ b/modules/core/src/compiler/shadow_dom_emulation/light_dom.js @@ -24,8 +24,11 @@ class _Root { // TODO: LightDom should implement SourceLightDom and DestinationLightDom // once interfaces are supported export class LightDom { + // The light DOM of the element is enclosed inside the lightDomView lightDomView:View; + // The shadow DOM shadowDomView:View; + // The nodes of the light DOM nodes:List; roots:List<_Root>; @@ -47,6 +50,7 @@ export class LightDom { return this._collectAllContentTags(this.shadowDomView, []); } + // Collects the Content directives from the view and all its child views _collectAllContentTags(view: View, acc:List):List { var eis = view.elementInjectors; for (var i = 0; i < eis.length; ++i) { @@ -66,6 +70,10 @@ export class LightDom { return acc; } + // Collects the nodes of the light DOM by merging: + // - nodes from enclosed ViewPorts, + // - nodes from enclosed content tags, + // - plain DOM nodes expandedDomNodes():List { var res = []; @@ -90,6 +98,8 @@ export class LightDom { return res; } + // Returns a list of Roots for all the nodes of the light DOM. + // The Root object contains the DOM node and its corresponding injector (could be null). _roots() { if (isPresent(this.roots)) return this.roots; @@ -101,6 +111,7 @@ export class LightDom { } } +// Projects the light DOM into the shadow DOM function redistributeNodes(contents:List, nodes:List) { for (var i = 0; i < contents.length; ++i) { var content = contents[i];