Style binding deprecations + CSP violations from component?

Design
1

So I’m trying to write a CSP friendly component that does some dynamic sizing (you can find it here). Due to the dynamic nature, it needs to set the style tag. From a CSP perspective, if you’re doing this via the CSSOM within an already allow script, it should be okay. And indeed, that’s what I see in my component dummy app: I use the component, dynamic style tags are added via javascript HTMLElement.style objects without issue, and if you manually add a tag with an inline style only then do you see a CSP violation.

But now when I pull my component into an external application with the same CSP settings, I’m getting all sorts of CSP violations and deprecation notices about binding the style attribute (I’m using Ember 1.11.1). I’m totally lost because I’m not even binding the style attribute! I’m doing stuff like this:

var style = this.element.style,
  splitterWidth = this.get('splitterWidth'),
  dimension = `${splitterWidth}px`;
  ...
  style.width = dimension;

What the heck is going on here?!

2

Ugh, I figured this out: I had still had another splitter component installed within my application. The two components have sub-component names, so the two components were mixing. Moral of the story: don’t use generic names for components.

3

ya the error messages for CSP are pretty lame and not very actionable :frowning: