Web Component styling with custom properties

When you are creating a web component, you may want to expose certain properties to outside styling. For this, custom properties are a great tool. For example, you could set a background color inside of the web component itself, but open it up to outside customization. Additionally, custom properties provide a fallback method, which is a great way to set your own defaults. In the custom elements styles, this might look like: :host { background-color: var(--background-color, purple); } Then, by targeting the name of the custom element, you could set the updated value. This could be applied outside of the shadow DOM, meaning you’ve crossed the shadow DOM barrier. my-custom-element { --background-color: pink; } Alternatively, you could set the custom properties at the root of the document. In this case, it’s probably better to prefix the custom property names to avoid collisions with other custom properties that might be on the page. :root { --my-custom-element--background-color: pink; }…