CSS - Pseudo-element - ::part()

Previous
Quiz

Description

The ::part() pseudo-element in CSS is used to represent an element within a shadow tree, that has a matching part attribute; i.e. the ::part() pseudo-element acts like a function and takes the part as an argument.

part attribute is a global attribute, that represents a space-separated list of part names of an element. These part names allows to select and style the specific elements of a shadow tree, using the ::part() pseudo-element.

Syntax

 selector::part(+) { /* ... */ }

CSS ::part() Example

Here is an example of ::part() pseudo-element. In this example:

  • A template is created using JavaScript (new-widget).

  • Declare a part of the template as widget.

  • Passing 'widget' as argument to the ::part() pseudo-element, where CSS styling is specified.

  • As the part (widget) contains a <p> tag, the CSS style is applied on this <p> tag.

 <html> <head> <style> .container { max-width: 500px; margin: 0 auto; padding: 2em; } body { font: 1em/1.618 Segoe UI, sans-serif; } new-widget::part(widget) { max-width: 300px; padding: 1em; background-color: lightgoldenrodyellow; border-radius: 20%; } </style> </head> <body> <div class="container"> <p>This paragraph is rendered as normal without any style.</p> <template id="new-widget"> <div part="widget"> <p>This paragraph is rendered as a part of the main paragraph and thus the ::part() pseudo-element is applied here.</p> </div> </template> <new-widget></new-widget> <script> let template = document.querySelector("#new-widget"); globalThis.customElements.define( template.id, class extends HTMLElement { constructor() { super() .attachShadow({ mode: "open" }) .append(template.content); } } ); </script> </div> </body> </html>
Print Page
Previous
Next
Advertisements