<p>
  <parent-element></parent-element>
</p>
parent-element::part(parent) {
  color: green;
}

parent-element::part(child) {
  color: blue;
}

parent-element::part(renamed) {
  color: red;
}

parent-element::part(renamed)::after {
  display: inline;
  content: '(renamed)';
}

parent-element::part(first-word) {
  color: hotpink;
}

parent-element::part(second-word) {
  color: rebeccapurple;
}
customElements.define('parent-element', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  
    this.shadowRoot.innerHTML = `
      <div part="parent">
        Parent start
        <child-element exportparts="child"></child-element>
        Parent continue
        <child-element exportparts="child: renamed"></child-element>
        Again in parent
        <child-element exportparts="first-word, second-word"></child-element>
        parent end
      </div>
    `
  }
});

customElements.define('child-element', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 0.5rem 0;
        }
      </style>
      <div part="child">
        <span part="first-word">Child</span>
        <span part="second-word">content</span>
      </div>
    `
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.