cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): remove ViewEncapsulation.Native (#38882)

Browse Source 
Removes `ViewEncapsulation.Native` which has been deprecated for several major versions.

BREAKING CHANGES:
* `ViewEncapsulation.Native` has been removed. Use `ViewEncapsulation.ShadowDom` instead. Existing
usages will be updated automatically by `ng update`.

PR Close #38882
This commit is contained in:
Kristiyan Kostadinov
2020-10-08 16:59:29 +02:00
committed by atscott
parent 0e733f3689
commit 4a1c12c773
25 changed files with 77 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/platform-browser/test/dom/dom_renderer_spec.ts
View File

@ -20,8 +20,8 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
TestCmp, SomeApp, CmpEncapsulationEmulated, CmpEncapsulationNative, CmpEncapsulationNone,
CmpEncapsulationNative
TestCmp, SomeApp, CmpEncapsulationEmulated, CmpEncapsulationShadow, CmpEncapsulationNone,
CmpEncapsulationShadow
]
});
renderer = TestBed.createComponent(TestCmp).componentInstance.renderer;
@ -98,16 +98,14 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
});
});
if (browserDetection.supportsDeprecatedShadowDomV0) {
if (browserDetection.supportsShadowDom) {
it('should allow to style components with emulated encapsulation and no encapsulation inside of components with shadow DOM',
() => {
const fixture = TestBed.createComponent(SomeApp);
const cmp = fixture.debugElement.query(By.css('cmp-shadow')).nativeElement;
const shadow = cmp.shadowRoot.querySelector('.shadow');
const cmp = fixture.debugElement.query(By.css('cmp-native')).nativeElement;
const native = cmp.shadowRoot.querySelector('.native');
expect(window.getComputedStyle(native).color).toEqual('rgb(255, 0, 0)');
expect(window.getComputedStyle(shadow).color).toEqual('rgb(255, 0, 0)');
const emulated = cmp.shadowRoot.querySelector('.emulated');
expect(window.getComputedStyle(emulated).color).toEqual('rgb(0, 0, 255)');
@ -119,15 +117,6 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
});
}
@Component({
selector: 'cmp-native',
template: `<div class="native"></div><cmp-emulated></cmp-emulated><cmp-none></cmp-none>`,
styles: [`.native { color: red; }`],
encapsulation: ViewEncapsulation.Native
})
class CmpEncapsulationNative {
}
@Component({
selector: 'cmp-emulated',
template: `<div class="emulated"></div>`,
@ -149,7 +138,7 @@ class CmpEncapsulationNone {
@Component({
selector: 'cmp-shadow',
template: `<div class="shadow"></div><cmp-emulated></cmp-emulated><cmp-none></cmp-none>`,
styles: [`.native { color: red; }`],
styles: [`.shadow { color: red; }`],
encapsulation: ViewEncapsulation.ShadowDom
})
class CmpEncapsulationShadow {
@ -158,7 +147,7 @@ class CmpEncapsulationShadow {
@Component({
selector: 'some-app',
template: `
<cmp-native></cmp-native>
<cmp-shadow></cmp-shadow>
<cmp-emulated></cmp-emulated>
<cmp-none></cmp-none>
`,

4
packages/platform-browser/test/dom/shadow_dom_spec.ts
View File

@ -15,13 +15,11 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
if (browserDetection.supportsShadowDom) {
describe('ShadowDOM Support', () => {
let testContainer: HTMLDivElement;
beforeEach(() => {
TestBed.configureTestingModule({imports: [TestModule]});
});
it('should attach and use a shadowRoot when ViewEncapsulation.Native is set', () => {
it('should attach and use a shadowRoot when ViewEncapsulation.ShadowDom is set', () => {
const compEl = TestBed.createComponent(ShadowComponent).nativeElement;
expect(compEl.shadowRoot!.textContent).toEqual('Hello World');
});