If I understand correctly Polymer is adding matching class tags to elements
in the template and css. Since d3 is adding elements they don't the extra
class. You need to do something like this:
```
<style>
.content-container > ::content .axis path,
.content-container > ::content .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.content-container > ::content .bar {
fill: steelblue;
}
.content-container > ::content .x.axis path {
display: none;
}
</style>
<template>
<div class="content-container">
<content>
<div id="chart" class="poly-bars">
</div>
</content>
</div>
</template>
```
On Friday, June 5, 2015 at 8:07:24 PM UTC+9, [email protected] wrote:
>
> Hello everyone,
>
> I really like the idea of encapsulated web components and I'm
> experimenting with building some web app with Polymer 1.0. Unfortunately I
> can't figure out how to apply some styles to generated DOM elements that do
> not leak. To be more precisely to apply styles to D3.js generated DOM
> elements that do not leak.
>
>
> The D3 blog has examples using older Polymer versions (<style> inside
> <template>):
>
> http://bl.ocks.org/psealock/a4f1e24535f0353d91ea
>
> <polymer-element name="pie-chart" attributes="url">
>> <template>
>> <style>
>> :host { display: block; height: 400px; }
>> display: block;
>> height: 400px;
>> }
>> ...
>
> This still works in Polymer 1.0 but leaks the styles. Does anyone have a hint
> on how to do this in a proper non leaking Polymer 1.0 way? The documentation
> on the Polymer website does not really help here unfortunately - to many DOMs
> for my brain: Shadow, Shady, Light, Local, .... ;-)
>
> Thanks.
>
>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/fda23296-9aaa-403a-9f67-e7ca67533cc6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
