SKMTH SKMTH - 11 months ago 83
CSS Question

Styling paper-tab content

I have concerning the content of

. Is there a way to style them in order to get two lines of content in each tabs?
Back in time, I would have created two
div, then used
::shadow .tab-content
to apply a
flex-direction: column``But now
is deprecated... I've tried to replace it with the full selector as suggested on the chromestatus platform:

paper-tabs.tabs paper-tab #shadow-root
flex-direction: column;

but it doesn't work either.

I've tried using the mixin, with
style is="custom-style"

--paper-tab-content: {flex-direction: column;};

doesn't work either

Any ideas?

Answer Source

Polymer allows element customization through css mixins

Refering to the documentation for paper-tabs we can see that paper-tabs has a css mixin called --paper-tabs. In fact most polymer elements have a mixin named after the custom-element and this is the recommended way. Looking at the source we can see that the mixin is applied on the css :host tag. It is important that the mixin is created on the :root tag.

        <base href="">
        <script src="components/webcomponentsjs/webcomponents-lite.js"></script>
        <link href="polymer/polymer.html" rel="import">
        <link href="paper-tabs/paper-tabs.html" rel="import">
        <style is="custom-style">
          :root {
             /* Set custom property (variables) */
             --paper-tabs-selection-bar-color: red;
             /* Set mixin */
             --paper-tabs: {
                 height: 200px;
                 background: teal;
                 color: rebeccapurple;
           <paper-tabs selected="0">
                <paper-tab>TAB 1</paper-tab>
                <paper-tab>TAB 2</paper-tab>
                <paper-tab>TAB 3</paper-tab>