polymer1.0 style

Polymermer uses Shadow DOM styling rules to limit the style scope of each custom component (that is, each component can define its own independent style without interference from external global styles). How to define the internal style of the component, we need to use the <style> tag in the <dom-module> tag (version 1.1 is recommended to be at the same level as <template>).

Let's look at an example
first, the code of the custom component

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="sub-element">
    <style>
        :host {
            display: block;
            border: 1px solid red;
        }
        
        #child-element {
            background: yellow;
        }
        
        .content-wrapper >::content .special {
            background: silver;
        }
    </style>
    <template>
        <div id="child-element">In local DOM!</div>
        <div class="content-wrapper">
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            is: 'sub-element'
        });
    </script>
</dom-module>

The code of the main index.html

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="components/sub-element.html">
    <style>
        #child-element{
            background: green;
        }
    </style>
</head>
<body>
    <div id="child-element">native div of index page</div>
    <sub-element id="subElement">
        <div class="special">I'm content child of sub element</div>    
    </sub-element>
</body>
</html>

The result of the operation is as follows:
image description
You can see that we also defined a global style of #child-element in the main index.html, the effect is green background, but this style is defined again in the style setting in the sub-element , so the final rendering will take the self-assembly first, overwriting the definition in the parent container, or the global style definition. If we comment out this style in the sub-element, the sub-component will use the outer definition and display it in green.

#child-element {
    /*background: yellow;*/
}

image description
Let's look at a few places in the style that are different from the traditional writing methods in the past.

:host {
    display: block;
    border: 1px solid red;
}

:host is to set the host sub-container, you can think of it as <template></template>, or <sub-element></sub-element>

.content-wrapper >::content .special {
    background: silver;
}

::content is to set the inserted child tag, that is, the gray <div class="special">I'm content child of sub element</div> on the way

.content-wrapper >::content .special
---->最终会被翻译成
.content-wrapper >.special

Why let the style of the custom component have its own independent scope! The reason is actually simple. When we develop a system, we generally need to define a global set of themes, and the color design style of each control should be consistent. However, once I expand some components, some special style settings are required. It can be set inside each custom component without breaking the global css file.
The Polymer team now feels that the writing of ::content is a bit verbose and will be improved in subsequent versions, we will wait and see

Guess you like