When the emulated shadow DOM strategy is used, the compiler will update both the html and the css to scope the styles.

The current implementation needs some improvements:

• It only works when the component selector is a tag name. When the selector is complex (ie tag[attribute]), it would fail - the reason is that we try to add the selector name as an attribute to all child nodes and tag[attribute] is not a valid attribute name - fixed in Component Shim #715
• The :host selector is replaced by the component tag name. Because we can not use the tag name (see the first bullet point), we need to generate a distinct attribute for the component:

<cmp>
  <span>...</span>
</cmp>

<!-- should become -->

<cmp ng-cmp-1="" >
  <span ng-in-cmp-1="" >...</span>
</cmp>

Notice that the attribute on the component is not the same as the attribute inside the component.
fixed in #715

• It does not support @import (see CssShim crashes browser when encountering a CSS import #654)
• There should be a way to shim dynamically added nodes - will not be done for now as adding arbitrary html to a view view prevent view re-use.