Library customization

Web Components Styling.

Web Components are self consistent html code that can be used as a single html new tag type. The final user, just need to import the web component into his pages, and then use it.

For example this is a web component:

I just use the following code:

        <g-button-icon text="text"></g-button-icon>
    

The component accept just a little few parameters. text is one and it is used to show the button label. But what about background color o foreground or icon. The Web Component library I’m developing use different ways to pass parameter to a web component. Ex.

<g-button-icon text="text"></g-button-icon> 
<g-button-icon><text>text</text></g-button-icon>
<g-button-icon><script type="text/json">{ text: "text"}</script></g-button-icon>

All this methods are useful, but may be tedious for styling the component. It uses the old html style. In the old days (before css ) html styling was applied in the following way;

<div color="red">Text</div>

It is not the case to go back. So how can be customized a web component ?.
I will show a possible way.

Step 1: Use firebug to analyze the web component internal code.

styling-1Step 2: for each node discover which style property you want to customize.

styling-4.  
styling-3
styling-5

The involved rules are:

.md5_99f466793851ad4f9885ff185f3f8ca4, .Dg.webf_d0e1b74cd96bd2246feb3ff10113f143 {
background-color: rgb(255, 255, 255); /* button-background */
border: 1px solid rgb(217, 217, 217); /* button-border */
border-radius: 3px 3px 3px 3px; /* button-border */
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); /* button-shadow */
line-height: 28px; /* button-font */
}
.md5_3949c8b7253956565edc5e37fb7b193c, .webf_d0e1b74cd96bd2246feb3ff10113f143 {
font: 400 13px/28px Roboto,arial,sans-serif; /* font */
}
.md5_834d71ede5ad93c82d2b9008d0df3e0b, .webf_d0e1b74cd96bd2246feb3ff10113f143 .tf {
color: rgb(38, 38, 38); /* button-color */
font-size: 14px; /* button-font */
opacity: 0.7; /* button-font */
font-weight: bold; /* button-font */
}
.md5_7c5b6c728a36bd37269be3a5f409643f, .webf_d0e1b74cd96bd2246feb3ff10113f143 .iI {
background: url("...") no-repeat scroll -542px -44px transparent; /* button-icon */
height: 16px; /* button-icon */
width: 16px; /* button-icon */
}

<!-- Web Component inner code -->
<g-button-icon text="1">
<div class="Dg Ut webf_d0e1b74cd96bd2246feb3ff10113f143 webf_resetter action button" tabindex="19">
<span class="tf">
<span class="iI"></span>
<span class="MM jI">1</span>
</span>
</div>
</g-button-icon>

Step 3: Remove the selected properties from the original web component.
Step 4: Now you can go to define a global css for styling all components.

.button-background {
background-color: rgb(255, 255, 255); /* background */
}
.button-border {
border: 1px solid rgb(217, 217, 217); /* border */
border-radius: 3px 3px 3px 3px; /* border */
}
.button-shadow {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); /* shadow */
}
.button-font {
line-height: 28px; /* font */
opacity: 0.7; /* font */
font-weight: bold; /* font */
}
.font {
font: 400 13px/28px Roboto,arial,sans-serif; /* font */
}
.button-color {
color: rgb(38, 38, 38); /* color */
font-size: 14px; /* font */
}
.button-icon {
background: url("...") no-repeat scroll -542px -44px transparent; /* icon */
height: 16px; /* icon */
width: 16px; /* icon */
}

Step 5: Change the generated code as follow:

<g-button-icon text="1">
<div class="button-background button-border button-shadow font Dg Ut webf_d0e1b74cd96bd2246feb3ff10113f143 webf_resetter action button" tabindex="19">
<span class=" button-font button-color tf">
<span class=" button-icon iI"></span>
<span class="MM jI">1</span>
</span>
</div>
</g-button-icon>

Now  use:

<icon-button text="text"></icon-button>

Appling the following style.

<style>
.button-background {
background-color: rgb(125, 194, 225); /* background */
}
.button-border {
border: 1px solid rgb(14, 100, 129) /* border */
border-radius: 3px 3px 3px 3px; /* border */
}
.button-shadow {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); /* shadow */
}
.button-font {
line-height: 28px; /* font */
opacity: 0.7; /* font */
font-weight: normal; /* font */
}
.font {
font: 400 13px/28px arial,sans-serif; /* font */
}
.button-color {
color: rgb(38, 38, 38); /* color */
font-size: 14px; /* font */
}
.button-icon {
background: url("https://ssl.gstatic.com/s2/oz/images/sprites/stream_showroom-21c186501f61716e34b4baa7a27933d2.png") no-repeat scroll -542px -44px transparent; /* icon */
height: 16px; /* icon */
width: 16px; /* icon */
}
</style>

And this is the final result:

This is good to give a standard style to the library, but what about icons or specific button property ?

Just use:

 <style>
.info .button-icon {
background: url("https://ssl.gstatic.com/s2/oz/images/sprites/stream_showroom-21c186501f61716e34b4baa7a27933d2.png") no-repeat scroll -604px 4px transparent; /* icon */
height: 16px; /* icon */
width: 16px; /* icon */
}
</style>
<icon-button class="info" text="text"></icon-button>

To obtain:

This approach is good but removing properties from the web components style, we loose the possibility of use the web components alone (Removing properties is necessary because of the specificity of the rules).
Since my library uses Features which adds classes to the web components they can be used to increase specificity of the customization style element.

    .WEBF_CORE.WEBF_BUTTON .button-background {
        background-color: rgb(125, 194, 225); /* background */
    }
    .WEBF_CORE.WEBF_BUTTON .button-border {
        border: 1px solid rgb(14, 100, 129) /* border */
        border-radius: 3px 3px 3px 3px; /* border */
    }
    .WEBF_CORE.WEBF_BUTTON .button-shadow {
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); /* shadow */
    }
    .WEBF_CORE.WEBF_BUTTON .button-font {
        line-height: 28px; /* font */
        opacity: 0.7; /* font */
        font-weight: normal; /* font */
    }
    .WEBF_CORE .font {
        font: 400 13px/28px arial,sans-serif; /* font */
    }
    .WEBF_CORE.WEBF_BUTTON .button-color {
        color: rgb(38, 38, 38); /* color */
        font-size: 14px; /* font */
    }
    .WEBF_CORE.WEBF_BUTTON .button-icon {
        background: url("https://ssl.gstatic.com/s2/oz/images/sprites/stream_showroom-21c186501f61716e34b4baa7a27933d2.png") no-repeat scroll -542px -44px transparent; /* icon */
        height: 16px; /* icon */
        width: 16px; /* icon */
    }
    .WEBF_CORE.WEBF_BUTTON.info  .button-icon {
        background: url("https://ssl.gstatic.com/s2/oz/images/sprites/stream_showroom-21c186501f61716e34b4baa7a27933d2.png") no-repeat scroll -604px 4px transparent; /* icon */
        height: 16px; /* icon */
        width: 16px; /* icon */
    }