CSS Part

What are CSS Shadow Parts, how to use the ::part() selector to get global CSS styling to custom elements with Shadow DOM.

CSS parts It is a new technology that the CSS language gives us and that comes to solve one of the most important demands of Web Components developers of the last years.

In this article we will explain how work with CSS Part in our custom elements and how to write global CSS styles so that they penetrate the shadow SUN.

The CSS and Shadow DOM problem

One of the advantages that the development of Web Components brings us is the component encapsulation in what is known as This Javascript standard allows the components we develop are isolated from other parts of the page and do not suffer unwanted interference.

It can actually be a bit inaccurate to say that the shadow DOM isolates the component completely. There are some styles that naturally apply to all components, such as font-family or color. If these styles are not redefined within the component itself, the ones defined in the global CSS will be used. But this is normal behavior for HTML and CSS, so it shouldn’t be surprising.

This solves several common problems that existed before with other systems such as jQuery plugins, which when you had several on the page could break due to interactions between them, or due to the CSS that we had defined on the page globally.

With Shadow DOM the global CSS stylesdefined for the whole page, cannot cause component problemswhich makes it much easier reuse. However, this is also a double-edged sword that has caused conflicts of opinion among the developer community, especially those who are used to libraries without encapsulation, such as , where global styles can be used within components.

Many developers who are also used to working with CSS frameworks like Bootstrap or find that when using Web Components they cannot reuse all the classes of the framework, which results in an unexpected and frustrating experience.

Obviously, there are ways to get global CSS to penetrate components, such as CSS Custom Properties (CSS variables), however until now they stayed short or ineffective.

• For example, some developers decided not to use the Shadow DOM, which is perfectly possible, but doing so loses many of the benefits of the component and makes it much more difficult to work with slots.
• Other developers choose to use @import in component declarations, bringing with it a global CSS declaration to each custom element, but that is strongly discouraged because it creates massive amounts of CSS code that is actually being duplicated and multiplied throughout the page, to each time the component is used. Of course, this technique would negatively influence the performance of the applications.

CSS Parts improves component styling with Shadow DOM

The Shadow DOM is here to stay and its benefits far outweigh its drawbacks. Advances in the CSS standard and Web Components are aimed at making component encapsulation less of a problem for developers.

This is where the CSS Part appearswith the objective of significantly improving the possibilities of global CSS in components encapsulated with Shadow DOM. The idea is simply to provide a mechanism for developers to create CSS in global styles and for this CSS to be applied to components.

In this way, we can apply CSS from outside the components with styles as complex as necessary, achieving that increase the degree of customization of componentswithout having to modify the code of the components themselves.

Getting to know the CSS selector ::part()

::part is a CSS pseudo-element that allows to apply styles to other components used in the page, whose elements belong to a Shadow DOM.

For it to work, two requirements must come into play:

• In the Shadow DOM elements, that is, in the HTML markup of the template, we must use the “part” attribute indicating the name of this part of the component. This “part” attribute can be placed on any tag and will contain the name value of this CSS part.
• In the global CSS, we’ll use the ::part pseudo-element, indicating the part of the component we’re referring to in order to apply the styles.

Now we are going to see some examples so that everything is perfectly clear.

Using the part attribute in the template of our custom element

First we are going to see how the part attribute is used, which we must place in the HTML tags on which we want CSS styles to be applied from outside.

This is a button that can be styled from the outside

As you can see, defining a CSS part is so simple how to apply a simple html attribute. Each section of the component that you want to be able to style from the outside needs to be assigned this attribute, giving that part a name, in this case it would be “un_botton”.

Styling with the ::part pseudo-element

Now we are going to see how you can apply styles to that button. Let’s assume that this button has been used in a custom element called “my-element”. You could then use this CSS to style the button inside the component.

my-item::part(a_button) { border: 1px solid orange; font-size: 2rem; }

We could also define the “part” without indicating the name of the component, so that it affects all the CSS parts that have the same name.

::part(a_button) { border: 1px solid orange; font-size: 2rem; }

Thus, if there are multiple components on the page that have buttons with part=”a_button”, they would all be affected by the above style rules. The advantage in this case is that the same CSS rules can also be specified in one place, which reduces the amount of code that must be written and interpreted by the browser.

It is interesting to mention that ::part() has more specificity than the styles defined in the component itself. Therefore, if global styles defined with ::part() collide with styles defined in the component itself, the global ::part() will win. In other words, if you place a part in a component you are exposing it to any possible manipulation of its style, even if you have defined the CSS in a particular way in the custom element. As an alternative we could always use !important, to get override on the globally defined styles in a CSS Part, if necessary for a particular component.

These selectors can be made a bit more complicated by using other pseudo-classes like :hover or :focus .

::part(a_button):hover { border: 2px solid red; background-color: #666; colour: #ffc; }

CSS Parts compatibility with current browsers

This feature of the CSS and Web Components We can use it with complete peace of mind, since it is currently available in all current browsers.

Of course, Internet Explorer doesn’t support it, but we already know that this browser has a residual market share, and now more since Microsoft itself has stopped supporting it.

So thanks to ::part it is now possible for developers reluctant to use Web Components to feel more attracted to this Javascript standard.

Bonus: How you could use Tailwind classes in components with Shadow DOM

As we have said, many of the reluctance to use Web Components stemmed from the inability to use global CSS frameworks, such as Tailwind or Bootstrap. Thanks to the ::part() selector, this would now have an easier way to fix it.

In the case of Tailwind, the simplest solution would be to apply to define the global styles of a CSS part, using in it all the Tailwind classes that you want to penetrate the shadow DOM.

::part(‘browser’) { @apply p-4 m-2 bg-slate-700 text-white; }

In this way, all the components where we put the part=”browser” attribute to one of its elements, will have the Tailwind styles that are being defined with @apply. It is true that we would still not be able to directly use the Tailwind classes in the component template, but it would be perfectly feasible to use them through the global style in the parts where we want to apply them.