Day 28: custom properties and web components

We already know that we can encapsulate styles within a web component and we know that web components inherit styles. Another interesting feature of web components in terms of CSS is that custom properties used in a web component can be modified from the outside.

Let’s take this basic alert component.

Please confirm your e-mail address by clicking the link in the e-mail we just sent you.

class Alert extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});

const styles = document.createElement('style');
styles.textContent = `
div {
background-color: rgb(136 177 255 / 0.5);
color: rgb(0 0 0);
font-weight: bold;
padding: 1rem;
}
`


const content = document.createElement('div');
content.innerHTML = `
<slot></slot>
`


this.shadowRoot.append(styles)
this.shadowRoot.append(content)
}
}

customElements.define('matuzo-alert', Alert);
<matuzo-alert>
Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
</matuzo-alert>

Now, let’s say we want to reuse this component, but convey a different importance visually. We could add attributes (props) for styling to the web component.

<matuzo-alert type="error">
The amount must be a value between 1 and 16.
</matuzo-alert>
styles.textContent = `
div {
background-color: rgb(136 177 255 / 0.5);
color: rgb(0 0 0);
font-weight: bold;
padding: 1rem;
}

host([type="error"]) div {

}
`

This works and it’s also sometimes the preferred way, but we could also open the component up by using custom properties.

const styles = document.createElement('style');
styles.textContent = `
div {
background-color: var(--alert-bg, rgb(136 177 255 / 0.5));
color: var(--alert-color, rgb(0 0 0));
font-weight: bold;
padding: var(--alert-spacing, 1rem);
}
`

What’s happening here is that we set the background-color, color, and padding to a custom property. If the custom property isn’t defined, it falls back to default value. The web component still looks the same, but we can now change its styling according to our needs by modifying custom properties without touching the component.

Default

Please confirm your e-mail address by clicking the link in the e-mail we just sent you.

<matuzo-alert>
Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
</matuzo-alert>

Error

The amount must be a value between 1 and 16.

.error {
--alert-bg: rgb(255 119 119);
--alert-spacing: 2rem;
}
<matuzo-alert class="error">
The amount must be a value between 1 and 16.
</matuzo-alert>

Success

Settings saved successfully.

.success {
--alert-bg: rgb(39 149 39);
--alert-color: rgb(255 255 255);
}
<matuzo-alert class="success">
The amount must be a value between 1 and 16.
</matuzo-alert>


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

We already know that we can encapsulate styles within a web component and we know that web components inherit styles. Another interesting feature of web components in terms of CSS is that custom properties used in a web component can be modified from the outside.

Let's take this basic alert component.

Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
class Alert extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});

const styles = document.createElement('style');
styles.textContent = `
div {
background-color: rgb(136 177 255 / 0.5);
color: rgb(0 0 0);
font-weight: bold;
padding: 1rem;
}
`


const content = document.createElement('div');
content.innerHTML = `
<slot></slot>
`


this.shadowRoot.append(styles)
this.shadowRoot.append(content)
}
}

customElements.define('matuzo-alert', Alert);
<matuzo-alert>
Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
</matuzo-alert>

Now, let's say we want to reuse this component, but convey a different importance visually. We could add attributes (props) for styling to the web component.

<matuzo-alert type="error">
The amount must be a value between 1 and 16.
</matuzo-alert>
styles.textContent = `
div {
background-color: rgb(136 177 255 / 0.5);
color: rgb(0 0 0);
font-weight: bold;
padding: 1rem;
}

host([type="error"]) div {

}
`

This works and it’s also sometimes the preferred way, but we could also open the component up by using custom properties.

const styles = document.createElement('style');
styles.textContent = `
div {
background-color: var(--alert-bg, rgb(136 177 255 / 0.5));
color: var(--alert-color, rgb(0 0 0));
font-weight: bold;
padding: var(--alert-spacing, 1rem);
}
`

What's happening here is that we set the background-color, color, and padding to a custom property. If the custom property isn't defined, it falls back to default value. The web component still looks the same, but we can now change its styling according to our needs by modifying custom properties without touching the component.

Default

Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
<matuzo-alert>
Please confirm your e-mail address by clicking the link in the e-mail we just sent you.
</matuzo-alert>

Error

The amount must be a value between 1 and 16.
.error {
--alert-bg: rgb(255 119 119);
--alert-spacing: 2rem;
}
<matuzo-alert class="error">
The amount must be a value between 1 and 16.
</matuzo-alert>

Success

Settings saved successfully.
.success {
--alert-bg: rgb(39 149 39);
--alert-color: rgb(255 255 255);
}
<matuzo-alert class="success">
The amount must be a value between 1 and 16.
</matuzo-alert>


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-11-02T09:38:54+00:00) Day 28: custom properties and web components. Retrieved from https://www.scien.cx/2022/11/02/day-28-custom-properties-and-web-components/

MLA
" » Day 28: custom properties and web components." Manuel Matuzović | Sciencx - Wednesday November 2, 2022, https://www.scien.cx/2022/11/02/day-28-custom-properties-and-web-components/
HARVARD
Manuel Matuzović | Sciencx Wednesday November 2, 2022 » Day 28: custom properties and web components., viewed ,<https://www.scien.cx/2022/11/02/day-28-custom-properties-and-web-components/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 28: custom properties and web components. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/02/day-28-custom-properties-and-web-components/
CHICAGO
" » Day 28: custom properties and web components." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/11/02/day-28-custom-properties-and-web-components/
IEEE
" » Day 28: custom properties and web components." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/11/02/day-28-custom-properties-and-web-components/. [Accessed: ]
rf:citation
» Day 28: custom properties and web components | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/11/02/day-28-custom-properties-and-web-components/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.