CSS describes presentation separately from component logic, letting you style custom elements and their inner children instead of assigning style properties with JavaScript. section 2.5
Start with a minimal HTML and CSS version when layout matters. Previewing and tweaking the design directly makes iteration easier before adding Web Component logic. section 6.2
The examples use CSS to:
- Target a custom slider, set its dimensions and position, and create patterned backgrounds, gradients, and shadows. section 2.5
- Style a business card with typography, colors, dimensions, background images, logos, alignment, and shadows. section 6.2
- Keep visual design separate from the Web Component class while values such as names, titles, and contact details remain customizable. section 6.2
A styled custom slider
A <style> block targets wcia-slider and its .bg-overlay and .thumb children. CSS replaces JavaScript style assignments and produces a patterned, colored slider with a positioned thumb. section 2.5
Listing 2.4. Trading inline styles for CSS
<html>
<head>
<title>Slider</title>
<script>
class Slider extends HTMLElement {
connectedCallback() {
this.innerHTML =
'<div class="bg-overlay"></div><div class="thumb"></div>';
}
}
if (!customElements.get('wcia-slider')) {
customElements.define('wcia-slider', Slider);
}
</script>
<style> #1
wcia-slider {
display: inline-block;
position: relative;
border-radius: 3px;
height: 50px;
width: 500px;
background-image: linear-gradient(45deg, #ccc 25%,
transparent 25%),linear-gradient(-45deg, #ccc 25%,
transparent 25%),linear-gradient(45deg, transparent 75%,
#ccc 75%),linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.bg-overlay {
width: 100%;
height: 100%;
position: absolute;
border-radius: 3px;
background: linear-gradient(to right, #ff0000 0%, #ff000000 100%);
}
.thumb {
margin-top: -1px;
left: 250px;
width: 5px;
height: calc(100% - 5px);
position: absolute;
border-style: solid;
border-width: 3px;
border-color: white;
border-radius: 3px;
pointer-events: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<wcia-slider></wcia-slider>
</body>
</html>
Inspect the complete slider example, including the CSS rules that replace inline style changes. section 2.5
