Skip to content

Commit f1593eb

Browse files
rkirovrkirov
committed
feat(shadowdom): turn on ShadowDom Emulated Mode by default.
Closes: angular#526
1 parent 1d4ff9b commit f1593eb

File tree

10 files changed

+83
-22
lines changed

10 files changed

+83
-22
lines changed

‎modules/angular2/src/core/application.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {List, ListWrapper} from 'angular2/src/facade/collection';
1414
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
1515
import {VmTurnZone} from 'angular2/src/core/zone/vm_turn_zone';
1616
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
17-
import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
17+
import {ShadowDomStrategy, NativeShadowDomStrategy, EmulatedUnscopedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
1818
import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
1919
import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
2020
import {EventManager, DomEventsPlugin} from 'angular2/src/core/events/event_manager';
@@ -84,7 +84,9 @@ function _injectorBindings(appComponentType): List<Binding> {
8484
var plugins = [new HammerGesturesPlugin(), new DomEventsPlugin()];
8585
return new EventManager(plugins, zone);
8686
}, [VmTurnZone]),
87-
bind(ShadowDomStrategy).toClass(NativeShadowDomStrategy),
87+
bind(ShadowDomStrategy).toFactory(
88+
(styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
89+
[StyleUrlResolver, appDocumentToken]),
8890
Compiler,
8991
CompilerCache,
9092
TemplateResolver,

‎modules/angular2/src/core/compiler/shadow_dom_emulation/light_dom.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export class LightDom {
3636
this.lightDomView = lightDomView;
3737
this.shadowDomView = shadowDomView;
3838
this.nodes = DOM.childNodesAsList(element);
39+
3940
this.roots = null;
4041
}
4142

‎modules/angular2/src/core/compiler/shadow_dom_strategy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export class EmulatedUnscopedShadowDomStrategy extends ShadowDomStrategy {
7878
this._styleHost = styleHost;
7979
}
8080

81-
attachTemplate(el, view:viewModule.View){
81+
attachTemplate(el, view:viewModule.View) {
8282
DOM.clearNodes(el);
8383
_moveViewNodesIntoParent(el, view);
8484
}

‎modules/angular2/src/dom/browser_adapter.es6‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,9 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
8080
return res;
8181
}
8282
clearNodes(el) {
83-
el.innerHTML = '';
83+
for (var i = 0; i < el.childNodes.length; i++) {
84+
this.remove(el.childNodes[i]);
85+
}
8486
}
8587
appendChild(el, node) {
8688
el.appendChild(node);

‎modules/angular2/test/core/application_spec.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ class HelloRootCmp {
1818
}
1919
}
2020

21+
@Component({selector: 'hello-app'})
22+
@Template({inline: 'before: <content></content> after: done'})
23+
class HelloRootCmpContent {
24+
constructor() { }
25+
}
26+
2127
@Component({selector: 'hello-app-2'})
2228
@Template({inline: '{{greeting}} world, again!'})
2329
class HelloRootCmp2 {
@@ -48,14 +54,17 @@ class HelloRootCmp4 {
4854
}
4955

5056
export function main() {
51-
var fakeDoc, el, el2, testBindings;
57+
var fakeDoc, el, el2, testBindings, lightDom;
5258

5359
beforeEach(() => {
5460
fakeDoc = DOM.createHtmlDocument();
5561
el = DOM.createElement('hello-app', fakeDoc);
5662
el2 = DOM.createElement('hello-app-2', fakeDoc);
63+
lightDom = DOM.createElement('light-dom-el', fakeDoc);
5764
DOM.appendChild(fakeDoc.body, el);
5865
DOM.appendChild(fakeDoc.body, el2);
66+
DOM.appendChild(el, lightDom);
67+
DOM.setText(lightDom, 'loading');
5968
testBindings = [bind(appDocumentToken).toValue(fakeDoc)];
6069
});
6170

@@ -93,8 +102,7 @@ export function main() {
93102
it('should display hello world', (done) => {
94103
var injectorPromise = bootstrap(HelloRootCmp, testBindings);
95104
injectorPromise.then((injector) => {
96-
expect(injector.get(appElementToken)
97-
.shadowRoot.childNodes[0].nodeValue).toEqual('hello world!');
105+
expect(injector.get(appElementToken)).toHaveText('hello world!');
98106
done();
99107
});
100108
});
@@ -103,10 +111,8 @@ export function main() {
103111
var injectorPromise1 = bootstrap(HelloRootCmp, testBindings);
104112
var injectorPromise2 = bootstrap(HelloRootCmp2, testBindings);
105113
PromiseWrapper.all([injectorPromise1, injectorPromise2]).then((injectors) => {
106-
expect(injectors[0].get(appElementToken)
107-
.shadowRoot.childNodes[0].nodeValue).toEqual('hello world!');
108-
expect(injectors[1].get(appElementToken)
109-
.shadowRoot.childNodes[0].nodeValue).toEqual('hello world, again!');
114+
expect(injectors[0].get(appElementToken)).toHaveText('hello world!');
115+
expect(injectors[1].get(appElementToken)).toHaveText('hello world, again!');
110116
done();
111117
});
112118
});
@@ -131,5 +137,13 @@ export function main() {
131137
done();
132138
});
133139
});
140+
141+
it("should support shadow dom content tag", (done) => {
142+
var injectorPromise = bootstrap(HelloRootCmpContent, testBindings);
143+
injectorPromise.then((injector) => {
144+
expect(injector.get(appElementToken)).toHaveText('before: loading after: done');
145+
done();
146+
});
147+
});
134148
});
135149
}

‎modules/benchmarks/e2e_test/naive_infinite_scroll_spec.es6‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ describe('ng2 naive infinite scroll benchmark', function () {
99
it('should not throw errors', function() {
1010
browser.get(URL);
1111
var expectedRowCount = 18;
12-
var expectedCellsPerRow = 11;
13-
var allScrollItems = 'scroll-app /deep/ #testArea /deep/ scroll-item';
14-
var cells = `${ allScrollItems } /deep/ .row *`;
12+
var expectedCellsPerRow = 28;
13+
var allScrollItems = 'scroll-app #testArea scroll-item';
14+
var cells = `${ allScrollItems } .row *`;
1515
var stageButtons =
16-
`${ allScrollItems } /deep/ .row stage-buttons /deep/ button`;
16+
`${ allScrollItems } .row stage-buttons button`;
1717

1818
var count = function(selector) {
1919
return browser.executeScript(

‎modules/benchmarks/src/naive_infinite_scroll/index.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {Parser, Lexer, ChangeDetector, ChangeDetection}
66
from 'angular2/change_detection';
77
import {ExceptionHandler} from 'angular2/src/core/exception_handler';
88
import {
9-
bootstrap, Component, Viewport, Template, ViewContainer, Compiler, onChange
9+
bootstrap, Component, Viewport, Template, ViewContainer, Compiler, onChange, NgElement, Decorator
1010
} from 'angular2/angular2';
1111
import {Reflector, reflector} from 'angular2/src/reflection/reflection';
1212
import {CompilerCache} from 'angular2/src/core/compiler/compiler';
1313
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
14-
import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
14+
import {ShadowDomStrategy, NativeShadowDomStrategy, EmulatedUnscopedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
15+
import {Content} from 'angular2/src/core/compiler/shadow_dom_emulation/content_tag';
16+
import {DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
1517
import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
1618
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
1719
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
@@ -256,6 +258,12 @@ export function setupReflectorForAngular() {
256258
"annotations": []
257259
});
258260

261+
reflector.registerType(EmulatedUnscopedShadowDomStrategy, {
262+
"factory": (styleUrlResolver) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, null),
263+
"parameters": [[StyleUrlResolver]],
264+
"annotations": []
265+
});
266+
259267
reflector.registerType(StyleUrlResolver, {
260268
"factory": (urlResolver) => new StyleUrlResolver(urlResolver),
261269
"parameters": [[UrlResolver]],
@@ -274,6 +282,12 @@ export function setupReflectorForAngular() {
274282
"annotations": []
275283
});
276284

285+
reflector.registerType(Content, {
286+
"factory": (lightDom, el) => new Content(lightDom, el),
287+
"parameters": [[DestinationLightDom], [NgElement]],
288+
"annotations" : [new Decorator({selector: '[content]'})]
289+
});
290+
277291
reflector.registerType(StyleInliner, {
278292
"factory": (xhr, styleUrlResolver, urlResolver) =>
279293
new StyleInliner(xhr, styleUrlResolver, urlResolver),

‎modules/benchmarks/src/tree/tree_benchmark.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import {Parser, Lexer, ChangeDetector, ChangeDetection, jitChangeDetection}
22
from 'angular2/change_detection';
33
import {ExceptionHandler} from 'angular2/src/core/exception_handler';
44

5-
import {bootstrap, Component, Viewport, Template, ViewContainer, Compiler} from 'angular2/angular2';
5+
import {bootstrap, Component, Viewport, Template, ViewContainer, Compiler, NgElement, Decorator} from 'angular2/angular2';
66

77
import {CompilerCache} from 'angular2/src/core/compiler/compiler';
88
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
99
import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
1010
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
11-
import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
11+
import {ShadowDomStrategy, NativeShadowDomStrategy, EmulatedUnscopedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
12+
import {Content} from 'angular2/src/core/compiler/shadow_dom_emulation/content_tag';
13+
import {DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
1214
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
1315
import {UrlResolver} from 'angular2/src/core/compiler/url_resolver';
1416
import {StyleUrlResolver} from 'angular2/src/core/compiler/style_url_resolver';
@@ -127,12 +129,24 @@ function setupReflector() {
127129
"annotations": []
128130
});
129131

132+
reflector.registerType(EmulatedUnscopedShadowDomStrategy, {
133+
"factory": (styleUrlResolver) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, null),
134+
"parameters": [[StyleUrlResolver]],
135+
"annotations": []
136+
});
137+
130138
reflector.registerType(StyleUrlResolver, {
131139
"factory": (urlResolver) => new StyleUrlResolver(urlResolver),
132140
"parameters": [[UrlResolver]],
133141
"annotations": []
134142
});
135143

144+
reflector.registerType(Content, {
145+
"factory": (lightDom, el) => new Content(lightDom, el),
146+
"parameters": [[DestinationLightDom], [NgElement]],
147+
"annotations" : [new Decorator({selector: '[content]'})]
148+
});
149+
136150
reflector.registerType(UrlResolver, {
137151
"factory": () => new UrlResolver(),
138152
"parameters": [],

‎modules/examples/e2e_test/hello_world/hello_world_spec.es6‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ describe('hello world', function () {
4040
});
4141

4242
function getComponentText(selector, innerSelector) {
43-
return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.querySelector("'+innerSelector+'").textContent');
43+
return browser.executeScript('return document.querySelector("'+selector+'").querySelector("'+innerSelector+'").textContent');
4444
}
4545

4646
function clickComponentButton(selector, innerSelector) {
47-
return browser.executeScript('return document.querySelector("'+selector+'").shadowRoot.querySelector("'+innerSelector+'").click()');
47+
return browser.executeScript('return document.querySelector("'+selector+'").querySelector("'+innerSelector+'").click()');
4848
}

‎modules/examples/src/hello_world/index_static.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
77

88
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
99
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
10-
import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
10+
import {ShadowDomStrategy, NativeShadowDomStrategy, EmulatedUnscopedShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
11+
import {Content} from 'angular2/src/core/compiler/shadow_dom_emulation/content_tag';
12+
import {DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
1113
import {TemplateLoader} from 'angular2/src/core/compiler/template_loader';
1214
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
1315
import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
@@ -125,6 +127,12 @@ function setup() {
125127
"annotations": []
126128
});
127129

130+
reflector.registerType(EmulatedUnscopedShadowDomStrategy, {
131+
"factory": (styleUrlResolver) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, null),
132+
"parameters": [[StyleUrlResolver]],
133+
"annotations": []
134+
});
135+
128136
reflector.registerType(StyleUrlResolver, {
129137
"factory": (urlResolver) => new StyleUrlResolver(urlResolver),
130138
"parameters": [[UrlResolver]],
@@ -143,6 +151,12 @@ function setup() {
143151
"annotations": []
144152
});
145153

154+
reflector.registerType(Content, {
155+
"factory": (lightDom, el) => new Content(lightDom, el),
156+
"parameters": [[DestinationLightDom], [NgElement]],
157+
"annotations" : [new Decorator({selector: '[content]'})]
158+
});
159+
146160
reflector.registerType(StyleInliner, {
147161
"factory": (xhr, styleUrlResolver, urlResolver) =>
148162
new StyleInliner(xhr, styleUrlResolver, urlResolver),

0 commit comments

Comments
 (0)