Skip to content
This repository has been archived by the owner on Feb 22, 2018. It is now read-only.

CSS Shim

vmendi edited this page Jan 29, 2015 · 6 revisions

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").