AngularJS 1.5 component and styling
<p>I'm creating a layout generator for flexbox and I'm using AngularJS 1.5.7 components. Basically, my issue is that "replace" does not exist for component but I'd like to be able to dynamically style the root element of my component.</p>

<p>Say that I have a main "div" with its display set on "flex". When I click on a button, it adds a component in this "div" which will be the items of the flexbox layout. The HTML generated is:</p>

<pre><code>&lt;div style="display:flex;"&gt;
  &lt;item&gt;
    &lt;div style="flex-grow:1;..."&gt;&lt;/div&gt;
  &lt;/item&gt;
&lt;/div&gt;
</code></pre>

<p>My issue is that the styles are applied to the "div" <strong>inside</strong> the "item" element, but "flexbox" does not work as expected as the "item" element does not have any flexbox-related styling. Note that the idea is that I also have some dropdown and textbox used to modify the CSS properties of the "item" component. The template of this one looks like:</p>

<pre><code>&lt;div class="zone" data-ng-style="$ctrl.model.getStyle()"&gt;
...
&lt;/div&gt;
</code></pre>

<p>And I'm inserting this component like this:</p>

<pre><code>&lt;item model="$ctrl.item"&gt;&lt;/item&gt;
</code></pre>

<p>Then, my question is: "What's the alternative to 'replace' property of directives?" or "How to dynamically style the root element of the component?".</p>

<p>Thanks</p>