CSS - Pseudo-element - ::part()

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>
Advertisements