Lit、というかウェブコンポーネントには子要素を指定位置に再配置するためのslot 要素という機能があります。これはシャドウ DOM用のため、thisを返すcreateRenderRootメソッドを定義するなどして普通に DOM にレンダリングするようにしたLitElementでは機能しません……そのままでは。
しかし考えてみれば普通に DOM にレンダリングしたのですから普通に DOM として操作すればよいだけの話です。幸いなことにその実現を容易にするライフサイクルメソッドを LitElement クラスは定義可能です。
- レンダリング前に呼び出される
connectedCallbackメソッドで子要素を参照できます - レンダリング後に呼び出される
firstUpdateメソッドでレンダリングしたslot要素を参照できます
つまり connectedCallback が呼び出されたタイミングで対象の子要素の参照を保存しておき、firstUpdate が呼び出されたタイミングでレンダリングされた slot 要素に移動すればよいわけです。
一連の流れを実装したサンプルを gist に置きました。
LitElement の替わりに継承して、this を返す createRenderRoot メソッドを定義してもらえればと思います。
なお実用上問題ないだろうと考えてテキストの直接指定は考慮していません。任意のタグで囲んでください。
以上、参考になりましたら幸いです。