CSS Shim

When using useShadowDom: false, AngularDart shims CSS encapsulation.

This is how it works:

AngularDart compiles the component's template. It adds a marker attribute to every element in the template.

So

<div>
 <p>Hi</p>
</div>

becomes

<div my-component>
 <p my-component>Hi</p>
</div my-component>

AngularDart compiles the component's CSS files.

So

one, two {color: red;}

becomes

one[my-component], two[my-component] {color: red;}

When the shim does not work

When the shim is not powerful enough, you can fall back on the polyfill-next-selector, polyfill-unscoped-next-selector, and polyfill-non-strict directives.

• polyfill-next-selector {content: 'x > y'} z {} becomes x[tag] > y[tag] {}
• polyfill-unscoped-next-selector {content: 'x > y'} z {} becomes x > y {}
• polyfill-non-strict {} z {} becomes tag z {}

You can disable the shim completely by overriding the PlatformJsBasedShim and DefaultPlatformShim bindings globally.

@Injectable()
class DefaultPlatformNoShim implements DefaultPlatformShim {
  bool get shimRequired => true;
  String shimCss(String css, {String selector, String cssUrl}) => css;
  void shimShadowDom(Element root, String selector) {}
}

@Injectable()
class PlatformJsBasedNoShim implements PlatformJsBasedShim {
  bool get shimRequired => true;
  String shimCss(String css, {String selector, String cssUrl}) => css;
  void shimShadowDom(Element root, String selector) {}
}
    
main() {
  //....
  module.bind(PlatformJsBasedShim, toImplementation: PlatformJsBasedNoShim);
  module.bind(DefaultPlatformShim, toImplementation: DefaultPlatformNoShim);
}

Shim Limitations

Since the CSS shim requires the precompilation of the template and the CSS:

• Dynamically-created DOM will not be shimmed.
• The content included using ngInclude will not be shimmed.
• CSS shimming works only for components that have simple element selectors (e.g., "simple-tag").