This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
I was wondering what happens with HTML elements in web components when I add styles to the document. Under which circumstances do global styles defined in a style element or external stylesheet apply to these elements?
As it turns out, it depends on how you create and use the components. In my test setup I have an HTML document, a stylesheet and three different components.
styles.css
div {
border: 2px solid red;
}index.html
<head>
…
<link rel="stylesheet" href="styles.css">
</head>
<body>
<basic-component></basic-component>
<shadow-component></shadow-component>
<slot-component>
<div>Bye World!</div>
</slot-component>
<script src="basic-component.js" type="module"></script>
<script src="shadow-component.js" type="module"></script>
<script src="slot-component.js" type="module"></script>
</body>Web component without shadow DOM
If you add an element to a web component using JavaScript and you don’t attach it to the shadow DOM, styles defined outside the web component apply.
basic-component.js
class BasicComponent extends HTMLElement {
constructor() {
super();
this.innerHTML = `<div>Hello World!</div>`
}
}
customElements.define('basic-component', BasicComponent);Demo:
Web component with shadow DOM
If you attach an element to the shadow DOM inside the web component, style declarations from the outside don’t apply.
shadow-component.js
class ShadowComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `<div>Hello World!</div>`
}
}
customElements.define('shadow-component', ShadowComponent);Demo:
Web Component with slotted content
If you attach an element to the shadow DOM inside the web component and you pass slotted content, style declarations from the outside only apply to the slotted content.
class SlotComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<div>Hello World!</div>
<slot></slot>
`
}
}
customElements.define('slot-component', SlotComponent);Demo:
PS: The next post is coming on Monday because weekends are for family and friends. ❤️
This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-07T09:38:54+00:00) Day 10: global styles and web components. Retrieved from https://www.scien.cx/2022/10/07/day-10-global-styles-and-web-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.