<juicy-composition>

Custom Element that adds given Document Fragment to Shadow DOM

Consider you received set of HTML Elements from different vendors, like:

<span><paper-icon-button src="//assets-cdn.github.com/images/modules/logos_page/Octocat.png"></paper-icon-button> tomalec</span>
<span>Person details</span>
<span>Tomek</span>
<span>Wytrębowicz</span>
<img src="http://www.gravatar.com/avatar/a733c006efdb183b5d46c62a6e4bff84?s=128" alt="Gravatar" />

tomalec Person details Tomek Wytrębowicz

Kinda ugly, isn't it? Now, you would like to make it look better, but without changing their HTML structure and position, as they may interact with each other.

Thanks to juicy-composition you can do so. Just provide a layout - Shadow DOM, DocumentFragment given by .composition property. Then it will build regular HTML tree in Shadow DOM, and distribute your elements accordingly. For example you can build something like this:

Document Fragment

Put it into composition property...

<div>
    <paper-toolbar>
        <content select="[slot='1']"></content>
    </paper-toolbar>
    <my-flexbox>
        <div><content select="[slot='4']"></content></div>
        <paper-card>
            <paper-item>
                <content select="[slot='custom-slot-name']"></content>
            </paper-item>
            <paper-item>
                <content select="[slot='3']"></content>
            </paper-item>
            <paper-item>
                <content select="[slot='0']"></content>
            </paper-item>
        </paper-card>
    </my-flexbox>
    </div>

Result

...to get such result

tomalec Person details Tomek Wytrębowicz

Additional features

Auto-adding (hidden) slots for non-distributed elements.
- Filters/does not apply to non visual elements, like: template, link, script, style
- Prefixes the automatically created slot names with vendor name if given