Web Components Part 2 — Styling and Slots

What is a Web Component

Where we left off

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="app.js" defer></script>
</head>
<body>
<hello-world myProp="hello"></hello-world>
</body>
</html>
class HelloWorld extends HTMLElement {
constructor() {
super()
//Grabbing our Prop
const myProp = this.getAttribute("myProp")
console.log(myProp)
//Add ShadowDOM to Component
this.attachShadow({ mode: "open" })
//Add template to shadowDOM
this.shadowRoot.innerHTML = `<h1>Hello World</h1><h2>${myProp}</h2>`
}
}
customElements.define("hello-world", HelloWorld)

Styling

External Stylesheet

h1 {
color: green;
}
class HelloWorld extends HTMLElement {
constructor() {
super()
//Grabbing our Prop
const myProp = this.getAttribute("myProp")
console.log(myProp)
//Add ShadowDOM to Component
this.attachShadow({ mode: "open" })
//Add template to shadowDOM
this.shadowRoot.innerHTML = `
<link rel="stylesheet" href="ext.css"><h1>Hello World</h1><h2>${myProp}</h2>`
}
}
customElements.define("hello-world", HelloWorld)

Style Tag

class HelloWorld extends HTMLElement {
constructor() {
super()
//Grabbing our Prop
const myProp = this.getAttribute("myProp")
console.log(myProp)
//Add ShadowDOM to Component
this.attachShadow({ mode: "open" })
//Add template to shadowDOM
this.shadowRoot.innerHTML = `
<style>h1 {color: red;}</style><h1>Hello World</h1><h2>${myProp}</h2>`
}
}
customElements.define("hello-world", HelloWorld)

Parts

class HelloWorld extends HTMLElement {
constructor() {
super()
//Grabbing our Prop
const myProp = this.getAttribute("myProp")
console.log(myProp)
//Add ShadowDOM to Component
this.attachShadow({ mode: "open" })
//Add template to shadowDOM
this.shadowRoot.innerHTML = `
<h1 part="h1">Hello World</h1><h2>${myProp}</h2>`
}
}
customElements.define("hello-world", HelloWorld)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="app.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<hello-world myProp="hello"></hello-world>
</body>
</html>
::part(h1) {
color: purple;
}

Slots

class HelloWorld extends HTMLElement {
constructor() {
super()
//Grabbing our Prop
const myProp = this.getAttribute("myProp")
console.log(myProp)
//Add ShadowDOM to Component
this.attachShadow({ mode: "open" })
//Add template to shadowDOM
this.shadowRoot.innerHTML = `
<h1 part="h1">Hello World</h1><slot></slot><h2>${myProp}</h2>`
}
}
customElements.define("hello-world", HelloWorld)
<body>
<hello-world myProp="hello">
<h3>I've been slotted!</h3>
</hello-world>
</body>

Named Slots

class HelloWorld extends HTMLElement {
constructor() {
super()
//Grabbing our Prop
const myProp = this.getAttribute("myProp")
console.log(myProp)
//Add ShadowDOM to Component
this.attachShadow({ mode: "open" })
//Add template to shadowDOM
this.shadowRoot.innerHTML = `
<h1 part="h1">Hello World</h1><slot></slot><h2>${myProp}</h2><slot name="other"></slot>`
}
}
customElements.define("hello-world", HelloWorld)
<body>
<hello-world myProp="hello">
<h4 slot="other">I'm in a named slot</h4>
<h3>I've been slotted!</h3>
</hello-world>
</body>

Styling slotted element

class HelloWorld extends HTMLElement {
constructor() {
super()
//Grabbing our Prop
const myProp = this.getAttribute("myProp")
console.log(myProp)
//Add ShadowDOM to Component
this.attachShadow({ mode: "open" })
//Add template to shadowDOM
this.shadowRoot.innerHTML = `
<style>::slotted(*){color: red;}</style>
<h1 part="h1">Hello World</h1><slot></slot><h2>${myProp}</h2><slot name="other"></slot>`
}
}
customElements.define("hello-world", HelloWorld)
const lightStyle = document.createElement("style")
lightStyle.innerText = `.cheese {color: red;}`
document.querySelector("body").appendChild(lightStyle)

Bottom Line

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store