Zheden Zheden - 1 year ago 64
Javascript Question

Unable to use CSS from Angular2 Dart application (CSS shim)

I have Angular2 application in Dart (as here - https://angular.io/docs/dart/latest/quickstart.html) and calling javascript from there (D3.js library)

Problem: css is not loaded for svg circle


selector: 'root',
templateUrl: 'app_root.html',
styleUrls: const ['app_root.css'],
class RootComp {
Future showCircle() async {

final d3 = await js.context['d3'];
var svg = d3['select']('root')
['attr']('width', 100)
['attr']('height', 100);

['attr']("class", "circlemy")
['attr']("r", 40)
['attr']("cx", 50)
['attr']("cy", 50);


<div class="host-root">Pages with circles</div>


.host-root {
color: purple;
.circlemy {
fill: blue;

Since I use Angular2 components, my css file is transformed to following after build:

.host-root[_ngcontent-qxh-1] {
color: purple;
.circlemy[_ngcontent-qxh-1] {
fill: none;

and resulted html contains following code:

<div ng-app="">
<root _nghost-qxh-1="">
<div _ngcontent-qxh-1="" class="host-root">Page with circles</div>
<svg width="100" height="100">
<circle class="circlemy" r="40" cx="50" cy="50"></circle></svg>

I read that adding those
tags in Angular2 is called shiming. In https://github.com/angular/angular.dart/wiki/CSS-Shim I read that "Dynamically-created DOM will not be shimmed"

Is there a way I can use css for my svg circle?

Answer Source

You are right, the rewriting of the styles and addition of the attributes is to simulate style encapsulation similar to shadow DOM.

Angular doesn't add these attributes to HTML that is added dynamically.

As workaround this should work:

:host >>> .host-root {
  color: purple;
:host >>> .circlemy {
  fill: blue;

This way the selector is treated like to everything within <root> (template or children) that matches .host-root the styles will be applied.