Implementing the b-panel element

[Thanood]

The purpose if this issue is to document a solution we came across while @rborosak tried to implement a panel component as combination of custom elements.

Bootstrap's css for panels looks like this:

.panel-default > .panel-heading {
  style
}

The problem in question was the template of the b-panel custom element:

<template>
    <div class="panel-heading">
        <content></content>
    </div>
</template>

@JeroenVinke proposed something like:

<b-panel>
   <div class="panel">
     <b-panel-heading>
      <div class="panel-heading"></div>
     </b-panel-heading>
    </div>
</b-panel>

pointing out that:

the css in bootstrap isn't picking up on this because it is defined as .panel-default > .panel-heading { which means the .panel-heading is supposed to be directly underneath a .panel-default, and our b-panel-heading decorator is inbetween causing the css not to be applied

Furthermore, the <b-panel-heading> element should be configurable by its parent.

The solution has two steps:

1. assign the class panel directly to b-panel's template and use <content select="...">:

<template class="panel">
  <content select="b-panel-heading"></content><!--or just content -->
</template>

1. use a technique similar to https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/tabs/tabs.js#L17 to manipulate the children of <b-panel> so they have classes configured in b-panel's bindings.

That way it is possible to keep this structure, satisfying Bootstrap's css:

<b-panel class="panel">
  <b-panel-heading class="panel-heading">
  </b-panel-heading>
</b-panel>

and have the class panel-heading be configurable by its parent.

[adriatic]

Great article (although, I still have to refresh some css holes that developed recently)