Angular: Support ::ng-deep as an alternative to /deep/

Created on 12 Jun 2017 · 5Comments · Source: angulardart/angular

Angular will need some replacement
sass/dart-sass#154

compiler syncing ⚠ PRIORITY dev cycle new user

Source

zoechi

👍4

Most helpful comment

We've decided to deprecate /deep/ and >>>, and support ::ng-deep as a drop-in.

Here is our internal test case for this feature:

  test('should handle ::ng-deep', () {
    var css = '::ng-deep y {}';
    shimAndExpect(css, 'y {}');
    css = 'x ::ng-deep y {}';
    shimAndExpect(css, 'x.$content y {}');
    css = ':host > ::ng-deep .x {}';
    shimAndExpect(css, '.$host > .x {}');
    css = ':host ::ng-deep > .x {}';
    shimAndExpect(css, '.$host > .x {}');
    css = ':host > ::ng-deep > .x {}';
    shimAndExpect(css, '.$host > > .x {}');
  });

We've gotten confirmation this will be supported (parsable) in all major SASS tooling.

AngularDart 4.x.x will be the last major release to support either /deep/ or >>> (both, including ::ng-deep, will be available in 4.0). As a result, _native_ shadow DOM will also be deprecated (but not immediately removed), since there is no way after Chrome's /deep/ deprecation lands, and we don't have another story (yet).

NOTE: We will back-port and release 3.2.0 to unblock our users, but other packages (like angular_components) will need to be updated too in order to take advantage of this fully.

matanlurey on 16 Jun 2017

👍3

All 5 comments

We have a number of ideas, but nothing I'm able to publish yet. Will update soon.

matanlurey on 15 Jun 2017

That's what I wanted to hear, that it's on your radar. No need to provide details right now.

zoechi on 15 Jun 2017

We've decided to deprecate /deep/ and >>>, and support ::ng-deep as a drop-in.

Here is our internal test case for this feature:

  test('should handle ::ng-deep', () {
    var css = '::ng-deep y {}';
    shimAndExpect(css, 'y {}');
    css = 'x ::ng-deep y {}';
    shimAndExpect(css, 'x.$content y {}');
    css = ':host > ::ng-deep .x {}';
    shimAndExpect(css, '.$host > .x {}');
    css = ':host ::ng-deep > .x {}';
    shimAndExpect(css, '.$host > .x {}');
    css = ':host > ::ng-deep > .x {}';
    shimAndExpect(css, '.$host > > .x {}');
  });

We've gotten confirmation this will be supported (parsable) in all major SASS tooling.

NOTE: We will back-port and release 3.2.0 to unblock our users, but other packages (like angular_components) will need to be updated too in order to take advantage of this fully.

matanlurey on 16 Jun 2017

👍3

@leonsenft Was this included as part of #471 ?