Slot element inherits a parent's style

by Aggre _--

HTML

<x-tag>
  <div>
    xxx
  </div>
</x-tag>

<script type="module">
  import {html, render} from 'https://unpkg.com/lit-html?module'
  
  window.customElements.define('x-tag', class extends HTMLElement {
  	constructor() {
      super()
      const shadowRoot = this.attachShadow({mode: 'open'})
      render(html`<slot></slot>`, shadowRoot)
    }
  })
</script>

CSS

div {
  padding: 1rem;
  background-color: red;
}