Style Custom Elements

How to style custom elements

This post is for showing how to style custom elements when we are using angular js. We’ll see how to allow the creation of styling hooks that make it easy for a custom element’s user to customize the style from the outside. We might have anoticed that the normal way of styling wont work for custom elements when we are using angular js. So, in this tutorial we will see how to style custom elements with hooks. Before we go to the steps, we will try to understand what is custom elements.

Style Custom Elements

What is custom elements?

Custom Elements allow web developers to define new types of HTML elements. The spec is one of several new API primitives landing under the Web Components umbrella, but it’s quite possibly the most important. Web Components don’t exist without the features unlocked by custom elements. Custom elements provide a way for authors to build their own fully-featured DOM elements. Although authors could always use non-standard elements in their documents, with application-specific behavior added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes.

<custom -element></custom>

What is Shadow Dom

The HTML elements in your template become children in your custom element’s shadow DOM. Shadow DOM provides a mechanism for encapsulation, meaning that elements inside the shadow DOM don’t match selectors outside the shadow DOM. Likewise, styling rules inside the shadow DOM can’t “leak” out to affect elements outside the shadow DOM. Shadow DOM permits encapsulation of styling rules for custom elements. You can freely define styling information for your elements, such as fonts, text colors, and classes, without fear of the styles applying outside the scope of your element. The element to which shadow DOM is attached is known as the host. To style the host, we use the :host selector. We will see the different ways to style custom elements with styling hook.

Styling Custom Elements With :host

The :host selector makes it easy to select and style the custom element itself, meaning the shell of the element. By default, custom elements are set to display: inline, so here we specify that it should be display: block instead.

* The selector :host matches any element
* The selector :host(.my-section) matches elements of class my-section
* The selector :host(:hover) matches elements when they are hovered over

:host {
  all: initial;
  display: block;
  contain: content;
}

Let us analyse the above css. First of all, We set all: initial to reset all global style values so that they don’t affect our element’s styles. Note that this should be the first property that you set in your CSS rule, otherwise what follows could be reset too. Second thing is making the element display: block. By default, custom elements are set to display: inline, so here we specify that it should be display: block instead. This way of styling will apply to all the custom element which is a host.

Style custom elements – :host with a class name

Using :host, we could also style the element differently if it had a specific class name. For eg.

:host(.my-class) {
   color: red;
}

:host(.my-class) button {
   background: blue;
}

Style custom elements – Theming Using :host-context

This is another way of styling custom elements. We can use a :host-context() selector that will select our custom element only if it or any of its ancestors match the provided selector.

:host-context(.blue) {
    background: blue;
}

:host-context(.blue) button {
   background: white;
}

These are the ways to style custom elements and the html elements inside the custom elements.

label, , , , , , ,

About the author