This repository has been archived by the owner. 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").
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.