How To Append Slot Children To HTML Body Tag For Absolute Positioning?

I am creating a dropdown menu web component that will be used by consumers like:

Solution 1:

Moving light dom nodes around is usually not a good idea - your users (and the browser) expects them to stay where they are.

If you want to render the content somewhere else you could provide the content as an attribute.

A simplified example for lit-html (using it to set a property via .)

<my-el .content=${'<div>my content</div>'}></my-el>

Then in your custom element, you will need to do something with that string which is not yet in the dom.

class MyEl extends ... {
  onContentChanged() {
    document.body.querySelector('my-el-target').innerHTML = this.content;
  }
}

PS: this is highly oversimplified - in real you probably want to create/manage that my-el-target on connectedCallback - or let it be handled by a full controller. Also, the "template" probably should be a lit-template instead of a plain string...