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

Question

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

app_root.dart:

@Component(
  selector: 'root',
  templateUrl: 'app_root.html',
  styleUrls: const ['app_root.css'],
)
class RootComp {
 Future showCircle() async {
    injectScript('http://d3js.org/d3.v3.min.js');

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

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

app_root.html:

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

app_root.css:

.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>
</root></div>

I read that adding those _ngcontent-qxh-1 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?

Günter Zöchbauer · Accepted Answer · 2016-09-05 16:58:08Z

1

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.

answered Sep 5, 2016 at 16:58

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zheden Over a year ago

now css became like '[_nghost-ffi-1] .circlemy {..}', so host-root is ok as before, circle is not displayed at all (because there is some exception, but I dont see javascript exception, only dart, but that's another problem)

Günter Zöchbauer Over a year ago

Did you inspect the DOM? Is the <circle> added where you expect it? Did it get the fill: blue? style applied? Why don't you see JS exception? You could try without >>> (just a space)

Zheden Over a year ago

your original answer was correct (both >>> and " " work), I looked on wrong page when was checking that, silly mistake. Thanks a lot for such quick answer!

Günter Zöchbauer Over a year ago

Glad to hear you figured it out :)

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related