lwc-external

foobarbaz.html

<template>
    <p>foobarbaz</p>
    <div lwc:dom="manual"></div>
    <my-foobarbaz lwc:external foo="barbaz">lwc:external</my-foobarbaz>
</template

foobarbaz.js

import { LightningElement } from 'lwc';

export default class NativeCustomElements extends LightningElement {
    rendered = false;

    renderedCallback() {
        if (!this.rendered) {
            this.rendered = true;

            const div = this.template.querySelector('div');
            div.innerHTML = `<my-foobarbaz></my-foobarbaz>`;

            customElements.define("my-foobarbaz", class MyCounter extends HTMLElement {
                constructor() {
                    super();
                    this.__shadowRoot = this.attachShadow({ mode: 'closed' });
                    this.__shadowRoot.innerHTML = 'CONSTRUCTOR';
                }
                connectedCallback() {
                    this.__shadowRoot.innerHTML = `${this.__shadowRoot.innerHTML} CONNECTEDCALLBACK`;
                }
            });

        }
    }
}