Elements shadow dom fix#24861

Closed

robwormald wants to merge 9 commits intoangular:masterfrom

robwormald:elements-shadow-dom-fix

Contributor

robwormald commented Jul 12, 2018 •

edited

Loading

Adds a new optional parameter to the renderer.selectRootElement method:
Before:

renderer.selectRootElement(rootSelectorOrNode);

renderer.selectRootElement(rootSelectorOrNode, preserveContents?:boolean);

preserveContents defaults to false to preserve existing renderer behavior. If set to true, the renderer will not remove the existing contents of a root element when bootstrapping a component.

This is primarily useful when combined with the ViewEncapsulation.ShadowDom Renderer - the nodes are preserved, and developers can use <slot> elements to re-project the light DOM nodes.

This change had to be made to the Renderer API itself, rather than an in a specific renderer as the method is called on the default renderer, inside the view engine, rather than a renderer specific to the component: https://github.com/angular/angular/blob/master/packages/core/src/view/services.ts#L756

Fixes #24859

googlebot added the cla: yes label

mary-poppins commented Jul 12, 2018

You can preview 1eec884 at https://pr24861-1eec884.ngbuilds.io/.

robwormald force-pushed the elements-shadow-dom-fix branch 2 times, most recently from 458cf2f to 525ca3e Compare

July 12, 2018 21:36

mary-poppins commented Jul 12, 2018

You can preview 458cf2f at https://pr24861-458cf2f.ngbuilds.io/.

mhevery reviewed

View reviewed changes

packages/platform-browser/src/dom/dom_renderer.ts Outdated

Contributor

mhevery Jul 12, 2018

too many ;

packages/platform-browser/src/dom/dom_renderer.ts Outdated

Contributor

mhevery Jul 12, 2018

Not a fan of early returns. Makes the code hard to follow. Rewrite as:

if (!preserveContent) {
  el.textContent = '';
}

packages/platform-browser/src/dom/dom_renderer.ts Outdated

Contributor

mhevery Jul 12, 2018

Why is there an extra method here?

mary-poppins commented Jul 12, 2018

You can preview 525ca3e at https://pr24861-525ca3e.ngbuilds.io/.

mhevery approved these changes

View reviewed changes

robwormald force-pushed the elements-shadow-dom-fix branch from 7a08d69 to 8617d87 Compare

July 12, 2018 21:50

mary-poppins commented Jul 12, 2018

You can preview 7a08d69 at https://pr24861-7a08d69.ngbuilds.io/.

mary-poppins commented Jul 12, 2018

You can preview 8617d87 at https://pr24861-8617d87.ngbuilds.io/.

mhevery added the area: core label

mary-poppins commented Jul 12, 2018

You can preview 8d290e2 at https://pr24861-8d290e2.ngbuilds.io/.

mary-poppins commented Jul 15, 2018

You can preview 8cafe35 at https://pr24861-8cafe35.ngbuilds.io/.

robwormald force-pushed the elements-shadow-dom-fix branch from 8cafe35 to 1f5de46 Compare

July 15, 2018 23:10

mary-poppins commented Jul 15, 2018

You can preview 1f5de46 at https://pr24861-1f5de46.ngbuilds.io/.

mary-poppins commented Jul 16, 2018

You can preview f9b7adc at https://pr24861-f9b7adc.ngbuilds.io/.

gkalpak reviewed

View reviewed changes

packages/platform-browser/testing/src/browser_util.ts Outdated

Member

gkalpak Jul 16, 2018

This doesn't seem to be used anywhere. Is it necessary?

Contributor Author

robwormald Aug 7, 2018

I want to add a number of new integration tests for native stuff, so I added it here, also to make clear that both of these APIs are DEPRECATED

Contributor

IgorMinar Aug 16, 2018

@robwormald it's better to add these helper methods when we need them, otherwise lots of them go unused. Please use that rule in the future.

packages/platform-browser/testing/src/browser_util.ts Outdated

Member

gkalpak Jul 16, 2018 •

edited

Loading

typeof customElements !== 'undefined' could be replaced with this.supportsCustomElements (here and below).

packages/elements/test/slots_spec.ts Outdated

Member

gkalpak Jul 16, 2018

Nit: supportsShadowDom implies supportsCustomElements afaict.

packages/elements/test/slots_spec.ts Outdated

Member

gkalpak Jul 16, 2018

This component is not used afaict.

packages/elements/test/slots_spec.ts Outdated

Member

gkalpak Jul 16, 2018

This should be toBe(), instead of toEqual(), (here and below) to be sure the node is not duplicated or something.

packages/elements/test/slots_spec.ts Outdated

Member

gkalpak Jul 16, 2018

Unused.

packages/elements/test/slots_spec.ts Outdated

Member

gkalpak Jul 16, 2018

Unused.

robwormald force-pushed the elements-shadow-dom-fix branch from 1afc17b to 41e0914 Compare

July 31, 2018 22:04

mary-poppins commented Jul 31, 2018

You can preview 41e0914 at https://pr24861-41e0914.ngbuilds.io/.

benoitjchevalier mentioned this pull request

ng-content, slot and content elements don't work with nested Angular custom elements #24536

Closed

Contributor

mhevery commented Aug 2, 2018

http://test/OCL:207128490:BASE:207128536:1533232686068:75ae6d95

mhevery added action: merge target: major labels

ngbot bot commented Aug 2, 2018

I see that you just added the PR action: merge label, but the following checks are still failing:
     missing required label: "PR target: *"
     status "google3" is pending
     status "code-review/pullapprove" is pending

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

IgorMinar suggested changes

View reviewed changes

Contributor

IgorMinar left a comment

this pr has many of unresolved review comments from @gkalpak please address.

packages/core/src/render/api.ts Outdated

Contributor

IgorMinar Aug 2, 2018

please document the new param

Contributor

IgorMinar Aug 2, 2018

also please document the default value.

IgorMinar added action: cleanup and removed action: merge labels

robwormald force-pushed the elements-shadow-dom-fix branch from 41e0914 to 0f88a25 Compare

August 7, 2018 23:38

robwormald requested a review from IgorMinar

August 7, 2018 23:41

mary-poppins commented Aug 30, 2018

You can preview a81d30f at https://pr24861-a81d30f.ngbuilds.io/.

mhevery closed this in

6e828bb

mhevery pushed a commit that referenced this pull request


          ci: update chrome version to 67 (#24861)

1d8e821

PR Close #24861

mhevery pushed a commit that referenced this pull request


          ci: update firefox version to 61 (#24861)

6e6489a

PR Close #24861

mhevery pushed a commit that referenced this pull request


          test(core): update Web Platform feature detection (#24861)

d76a7d6

PR Close #24861

mhevery pushed a commit that referenced this pull request


          test(elements): add basic integration test for angular elements (#24861)

4815b92

PR Close #24861

mhevery pushed a commit that referenced this pull request


          feat(elements): enable Shadow DOM v1 and slots (#24861)

c9844a2

When using ViewEncapsulation.ShadowDom, Angular will not remove the child nodes of the DOM node a root Component is bootstrapped into. This enables developers building Angular Elements to use the `<slot>` element to do native content projection.

PR Close #24861

mhevery pushed a commit that referenced this pull request


          fix(elements): strict null checks (#24861)

a8210d0

PR Close #24861

mhevery pushed a commit that referenced this pull request


          fix(elements): add compiler to integration (#24861)

a080ffc

PR Close #24861

mhevery pushed a commit that referenced this pull request


          fix(elements): add compiler dependency (#24861)

6143da6

PR Close #24861

angular-automatic-lock-bot bot commented Sep 14, 2019

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular-automatic-lock-bot bot locked and limited conversation to collaborators

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge area: core cla: yes target: major