paywalled_content.js

customElements.define("paywalled-content", class extends HTMLElement {
    static observedAttributes = ["open"]

    attributeChangedCallback(name, oldValue, newValue) {
      if (name === "open" && newValue !== null) {
        this.shadowRoot.querySelector("slot").removeAttribute("name")
      } else {
        this.shadowRoot.querySelector("slot").name = "public"
      }
    }
  })

usage.html

<p>Intro content.</p>

<paywalled-content>
  <template shadowrootmode="open">
    <slot name="public"></slot>
  </template>

  <aside slot="public">
    <p>And that's all! Sign up for the full thing.</p>
  </aside>
  
  <!-- a server fetch can just append paywalled content here and toggle the element attribute `open` -->
</paywalled-content>