__renderTemplateInScopedContext({ template, slotName, renderAsDirectHostChild }) {
      const isFirstRender = !this.__renderMetaPerSlot.has(slotName);
      if (isFirstRender) {
        // @ts-expect-error wait for browser support
        const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
        const hasShadowRoot = Boolean(this.shadowRoot);
        if (!hasShadowRoot) {
          // TODO: throw an error in a breaking release
          // eslint-disable-next-line no-console
          console.error(`[SlotMixin] No shadowRoot was found`);
        }
        const registryRoot = supportsScopedRegistry ? this.shadowRoot : document;

        // @ts-expect-error wait for browser support
        const renderTargetThatRespectsShadowRootScoping = registryRoot.createElement('div');
        const startComment = document.createComment(`_start_slot_${slotName}_`);
        const endComment = document.createComment(`_end_slot_${slotName}_`);

        renderTargetThatRespectsShadowRootScoping.appendChild(startComment);
        renderTargetThatRespectsShadowRootScoping.appendChild(endComment);

        // Providing all options breaks Safari; keep host and creationScope
        const { creationScope, host } = this.renderOptions;
        render(template, renderTargetThatRespectsShadowRootScoping, {
          renderBefore: endComment,
          creationScope,
          host,
        });

        if (renderAsDirectHostChild) {
          const nodes = Array.from(renderTargetThatRespectsShadowRootScoping.childNodes);
          this.__appendNodes({ nodes, renderParent: this, slotName });
        } else {
          renderTargetThatRespectsShadowRootScoping.slot = slotName;
          this.appendChild(renderTargetThatRespectsShadowRootScoping);
        }

        this.__renderMetaPerSlot.set(slotName, {
          renderTargetThatRespectsShadowRootScoping,
          renderBefore: endComment,
        });

        return;
      }

      // Rerender
      const { renderBefore, renderTargetThatRespectsShadowRootScoping } =
        /** @type {RenderMetaObj} */ (this.__renderMetaPerSlot.get(slotName));

      const rerenderTarget = renderAsDirectHostChild
        ? this
        : renderTargetThatRespectsShadowRootScoping;

      // Providing all options breaks Safari: we keep host and creationScope
      const { creationScope, host } = this.renderOptions;
      render(template, rerenderTarget, { creationScope, host, renderBefore });

      // Assume we had this config:
      // `'my-slot': () => ({ template: myBool ? html`<div id=a></div>` : html`<span id=b></span>`, renderAsDirectHostChild: true })`
      // If myBool started as true, <div id=a></div> would be rendered in first render above, a slot would be applied,
      // resulting in <div id=a slot=my-slot></div>
      // However, when myBool changes to false, the <span id=b></span> would be rendered as root instead...
      // We need to make sure that this "replaced root" gets the slot applied as well => <span id=b slot=my-slot></span>
      const isRerenderingRootOfTemplate =
        renderAsDirectHostChild &&
        renderBefore.previousElementSibling &&
        !renderBefore.previousElementSibling.slot;

      if (isRerenderingRootOfTemplate) {
        renderBefore.previousElementSibling.slot = slotName;
      }
    }
@private
@param {object} opts
@param {import('lit').TemplateResult} opts.template
@param {string} opts.slotName
@param {boolean} [opts.renderAsDirectHostChild] when false, the render parent (wrapper div) will be kept in the light dom
@returns {void}