Styling generated DOM elements in Polymer 1.0? Shadow, Shady, Local, Light, ... DOM?

[olaf.s...@googlemail.com]

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.

[Robert Simon]

What exactly you mean leaking style

BTW your {} count does not match. So maybe better look into css :D

[olaf.s...@googlemail.com]

What exactly you mean leaking style

I want to define some styles within the component that are not applied to anything outside of the component.

e.g. component demo-element

<dom-module id="demo-element">
  <style>
    .foo {
      color: red;
    }
 </style>
 <template>
   <div class="foo">This should be red!</div>
 </template>
</dom-module>

And using this component:

<demo-element></demo-element>
<div class="foo">Should not be red!</div>

This works perfectly for DOM elements I create myself inside the component, but those that are generated by D3.js do not work.

The styles are not applied to them. For these I need to use the style tag inside the template. Which leads to leaking the style - thus

displaying "Should not be red!" in red.

The Polymer documentation notes one should not use the regular DOM API to programmatically modify the DOM and use the Polymer API instead.

Well, I hope this does not mean D3.js has to be rewritten for components to be able to use it. ;-(

 

BTW your {} count does not match. So maybe better look into css :D

;-)  The snippet is incomplete and only meant as an example from the D3.js blog.

[aub...@gmail.com]

Hi,

Interesting question. I would either be interested in the answer.

Matthieu,

[hyper...@gmail.com]

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>

```