This repository has been archived by the owner on Feb 22, 2018. It is now read-only.
Shadowless DOM #936
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| part of angular.core.dom_internal; | ||
|
|
||
| @proxy | ||
| class ShadowlessShadowRoot implements dom.ShadowRoot { | ||
|
There was a problem hiding this comment. ShadowRoot extends DocumentFragment and doesn't add too much more- perhaps just use DocumentFragment instead? Alternatively this may be a good case for a custom element. There was a problem hiding this comment. This is used in onShadowRoot, which needs to be renamed. We'll rework this later. |
||
| dom.Element _element; | ||
|
|
||
| ShadowlessShadowRoot(this._element); | ||
|
|
||
| noSuchMethod(Invocation invocation) { | ||
| throw new UnimplementedError("Not yet implemented in ShadowlessShadowRoot."); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| part of angular.core.dom_internal; | ||
|
|
||
| @Decorator( | ||
| selector: 'content' | ||
|
There was a problem hiding this comment. 4ws, ")" on the same line - same remarks further below |
||
| ) | ||
| class _Content implements AttachAware, DetachAware { | ||
| final _ContentPort _port; | ||
| final dom.Element _element; | ||
| dom.Comment _beginComment; | ||
| _Content(this._port, this._element); | ||
|
|
||
| attach() { | ||
|
|
||
| if (_port == null) return; | ||
| _beginComment = _port.content(_element); | ||
| } | ||
|
|
||
| detach() { | ||
| if (_port == null) return; | ||
| _port.detachContent(_beginComment); | ||
| } | ||
| } | ||
|
|
||
| class _ContentPort { | ||
| dom.Element _element; | ||
| var _childNodes = []; | ||
|
|
||
| _ContentPort(this._element); | ||
|
|
||
| pullNodes() { | ||
| _element.nodes.forEach((n) => _childNodes.add(n)); | ||
|
There was a problem hiding this comment. would addAll() work here ? |
||
| _element.nodes = []; | ||
| } | ||
|
|
||
| content(dom.Element elt) { | ||
| var hash = elt.hashCode; | ||
| var beginComment = new dom.Comment("content $hash"); | ||
|
|
||
| if (!_childNodes.isEmpty) { | ||
|
|
||
| elt.parent.insertBefore(beginComment, elt); | ||
| elt.parent.insertAllBefore(_childNodes, elt); | ||
| elt.parent.insertBefore(new dom.Comment("end-content $hash"), elt); | ||
| _childNodes = []; | ||
| } | ||
| elt.remove(); | ||
| return beginComment; | ||
| } | ||
|
|
||
| detachContent(dom.Node _beginComment) { | ||
| // Search for endComment and extract everything in between. | ||
| // TODO optimize -- there may be a better way of pulling out nodes. | ||
|
|
||
| var endCommentText = "end-${_beginComment.text}"; | ||
|
|
||
| var next; | ||
| for (next = _beginComment.nextNode; | ||
| next.nodeType != dom.Node.COMMENT_NODE && next.text != endCommentText; | ||
| next = _beginComment.nextNode) { | ||
| _childNodes.add(next); | ||
| next.remove(); | ||
| } | ||
| assert(next.nodeType == dom.Node.COMMENT_NODE && next.text == endCommentText); | ||
| next.remove(); | ||
| } | ||
| } | ||
|
|
||
| class TranscludingComponentFactory implements ComponentFactory { | ||
| final Expando _expando; | ||
|
|
||
| TranscludingComponentFactory(this._expando); | ||
|
|
||
| FactoryFn call(dom.Node node, DirectiveRef ref) { | ||
| // CSS is not supported. | ||
| assert((ref.annotation as Component).cssUrls == null || | ||
| (ref.annotation as Component).cssUrls.isEmpty); | ||
|
|
||
| var element = node as dom.Element; | ||
| return (Injector injector) { | ||
| var childInjector; | ||
| var component = ref.annotation as Component; | ||
| Scope scope = injector.get(Scope); | ||
| ViewCache viewCache = injector.get(ViewCache); | ||
| Http http = injector.get(Http); | ||
| TemplateCache templateCache = injector.get(TemplateCache); | ||
| DirectiveMap directives = injector.get(DirectiveMap); | ||
| NgBaseCss baseCss = injector.get(NgBaseCss); | ||
|
|
||
| var contentPort = new _ContentPort(element); | ||
|
|
||
| // Append the component's template as children | ||
| var viewFuture = ComponentFactory._viewFuture(component, viewCache, directives); | ||
|
|
||
| if (viewFuture != null) { | ||
| viewFuture = viewFuture.then((ViewFactory viewFactory) { | ||
| contentPort.pullNodes(); | ||
| element.nodes.addAll(viewFactory(childInjector).nodes); | ||
| return element; | ||
| }); | ||
| } else { | ||
| viewFuture = new async.Future.microtask(() => contentPort.pullNodes()); | ||
| } | ||
| TemplateLoader templateLoader = new TemplateLoader(viewFuture); | ||
|
|
||
| Scope shadowScope = scope.createChild({}); | ||
|
|
||
| var probe; | ||
| var childModule = new Module() | ||
| ..type(ref.type) | ||
|
|
||
| ..type(NgElement) | ||
| ..value(_ContentPort, contentPort) | ||
| ..value(Scope, shadowScope) | ||
| ..value(TemplateLoader, templateLoader) | ||
| ..value(dom.ShadowRoot, new ShadowlessShadowRoot(element)) | ||
| ..factory(ElementProbe, (_) => probe); | ||
| childInjector = injector.createChild([childModule], name: SHADOW_DOM_INJECTOR_NAME); | ||
|
|
||
| var controller = childInjector.get(ref.type); | ||
| shadowScope.context[component.publishAs] = controller; | ||
| ComponentFactory._setupOnShadowDomAttach(controller, templateLoader, shadowScope); | ||
| return controller; | ||
| }; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,3 +35,5 @@ class NgTemplate { | |
| ? (element as dom.TemplateElement).content.innerHtml | ||
| : element.innerHtml)); | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should you update
_cloneWithNewMapbelow ?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch! I wrote a test for this in 0c797cc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One minor thing is also to update class level docs "Angular components use shadow-DOM for rendering their templates"