This repository has been archived by the owner on Feb 22, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 248
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 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 {} becomesx[tag] > y[tag] {}
-
polyfill-unscoped-next-selector {content: 'x > y'} z {}
becomesx > y {}
-
polyfill-non-strict {} z {}
becomestag 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);
}
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").