iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(platform-browser): allow to mix shadow dom with non shadow dom

Browse Source 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec5731af3e6fe700d8db48b15b1e5aa17e3
and adds a test for this case.

Related to #7887
This commit is contained in:
Tobias Bosch 2017-02-16 11:56:17 -08:00 committed by Igor Minar
parent 778ded9fcf
commit ab26b6518d
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
modules/@angular/platform-browser/src/dom/dom_renderer.ts
View File

@ -126,6 +126,7 @@ export class DomRenderer implements Renderer {
let nodesParent: Element|DocumentFragment;
if (this.componentProto.encapsulation === ViewEncapsulation.Native) {
nodesParent = (hostElement as any).createShadowRoot();
this._rootRenderer.sharedStylesHost.addHost(nodesParent);
for (let i = 0; i < this._styles.length; i++) {
const styleEl = document.createElement('style');
styleEl.textContent = this._styles[i];

37
modules/@angular/platform-browser/test/dom/dom_renderer_spec.ts
View File

@ -8,7 +8,6 @@
import {CommonModule} from '@angular/common';
import {Component, NgModule, ViewEncapsulation} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {describe, it} from '@angular/core/testing/testing_internal';
import {BrowserModule} from '@angular/platform-browser';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {browserDetection} from '@angular/platform-browser/testing/browser_util';
@ -21,14 +20,28 @@ export function main() {
// other browsers don't support shadow dom
if (browserDetection.isChromeDesktop) {
it('should add only styles with native encapsulation to the shadow DOM', () => {
it('should allow to style components with emulated encapsulation and no encapsulation inside of components with shadow DOM',
() => {
TestBed.overrideComponent(CmpEncapsulationNative, {
set: {
template:
'<div class="native"></div><cmp-emulated></cmp-emulated><cmp-none></cmp-none>'
}
});
const fixture = TestBed.createComponent(SomeApp);
fixture.detectChanges();
const cmp = fixture.debugElement.query(By.css('cmp-native')).nativeElement;
const styles = cmp.shadowRoot.querySelectorAll('style');
expect(styles.length).toBe(1);
expect(styles[0]).toHaveText('.cmp-native { color: red; }');
const native = cmp.shadowRoot.querySelector('.native');
expect(window.getComputedStyle(native).color).toEqual('rgb(255, 0, 0)');
const emulated = cmp.shadowRoot.querySelector('.emulated');
expect(window.getComputedStyle(emulated).color).toEqual('rgb(0, 0, 255)');
const none = cmp.shadowRoot.querySelector('.none');
expect(window.getComputedStyle(none).color).toEqual('rgb(0, 255, 0)');
});
}
});
@ -36,8 +49,8 @@ export function main() {
@Component({
selector: 'cmp-native',
template: ``,
styles: [`.cmp-native { color: red; }`],
template: `<div class="native"></div>`,
styles: [`.native { color: red; }`],
encapsulation: ViewEncapsulation.Native
})
class CmpEncapsulationNative {
@ -45,8 +58,8 @@ class CmpEncapsulationNative {
@Component({
selector: 'cmp-emulated',
template: ``,
styles: [`.cmp-emulated { color: blue; }`],
template: `<div class="emulated"></div>`,
styles: [`.emulated { color: blue; }`],
encapsulation: ViewEncapsulation.Emulated
})
class CmpEncapsulationEmulated {
@ -54,8 +67,8 @@ class CmpEncapsulationEmulated {
@Component({
selector: 'cmp-none',
template: ``,
styles: [`.cmp-none { color: yellow; }`],
template: `<div class="none"></div>`,
styles: [`.none { color: lime; }`],
encapsulation: ViewEncapsulation.None
})
class CmpEncapsulationNone {