CQ Question #1 - using ::part inside a shadowDOM style

by WebComponents

HTML

<script>
  customElements.define('css-part', class extends HTMLElement {
        constructor() {
            let style = `:host{display:inline-block;font:11px arial;padding:1em;background:green;color:gold}` +
                        `::part(header1){background:red}` + // does style in FireFox!
                        `:host([foo])::part(header2){background:blue}` +
                        `[part*=header3]{background:deeppink}` ;
            super()
                .attachShadow({ mode: "open" })
                .innerHTML = `<style>${style}</style>` +
                `<h1 part="header1">Hello Web Component</h1>` +
                `<h1 part="header2">what is your displayed</h1>` +
                `<h1 part="header3">background color?</h1>`;
        }
    });
</script>

<style>
  css-part::part(header2) {
      background2:rebeccapurple; /* higher specificity than :host in shadowStyle */
  }
</style>
<css-part foo="bar"></css-part>