Custom style variables for elements added outside of polymer

[alex88]

I'm creating an element that wraps an external javascript that creates a graph inside the element.

My problem is trying to apply css using element's css variables to dom manipulated by the external javascript (not written for polymer).

For example:

.td-over {
  background: var(--custom-element-key-color) !important;
}

this creates the following style:

.custom-element-0 .td-over.custom-element {
  background:#fe4365 !important;
}

the problem is that the dom created by the external component doesn't have a .custom-element class so it's not applied.

Is there a way to disable that behaviour? Is it done for not propagating changes to further children?

An example plunkr: http://plnkr.co/edit/v5YSFpDguFhNd6tsGenf

[alex88]

Just found the solution, just prepend the css selector with ::content so it doesn't restrict itself within the current element only