Как заполнить слоты при наследовании от веб-компонента?

Скажем, у меня есть диалоговый компонент, например

class ModalDialog extends HTMLElement {
    constructor(){
        super()
        this._shadow = this.attachShadow({mode: 'closed'})
    }

    connectedCallback(){
        const template = `
            <style>
            ... lots of style that doesn't matter to this question ...
            </style>
            <div class="dialog">
                <div class="dialog-content">
                    <div class="dialog-header">
                        <slot name="header"></slot>
                        <span class="close">&times;</span>
                    </div>
                    <div class="dialog-body"><slot name="body"></slot></div>
                    <div class="dialog-footer"><slot name="footer"></slot></div>
                </div>
            </div>
        `

        this._shadow.innerHTML = template
        this._shadow.querySelector('.close').onclick = () => this.hide()
        const dialog = this._shadow.querySelector('.dialog')
        dialog.onclick = evt => {
            if(evt.target == dialog){ //only if clicking on the overlay
                this.hide()
            }
        }
        this.hide()
    }

    show() {
        this.style.display = 'block'
    }

    hide(){
        this.style.display = 'none'
    }
}

window.customElements.define('modal-dialog', ModalDialog)

Теперь предположим, что я хочу создать специальные диалоги... например. тот, который позволяет пользователю выбрать изображение.

Я мог бы сделать это так

import {} from './modal-dialog.js'

class ImageSelector extends HTMLElement {
    constructor(){
        super()
        this._shadow = this.attachShadow({mode: 'closed'})
    }

    connectedCallback(){
        const template = `
            <style>
                ... more style that doesn't matter ...
            </style>
            <modal-dialog>
                <div slot="header"><h3>Select Image</h3></div>
                <div slot="body">
                     ... pretend there's some fancy image selection stuff here ...
                </div>
            </modal-dialog>
        `
        this._shadow.innerHTML = template
    }

    show(){
        this._shadow.querySelector('modal-dialog').show()
    }

    hide(){
        this._shadow.querySelector('modal-dialog').hide()
    }
}
window.customElements.define('image-selector', ImageSelector)

но мне не нравятся методы show и hide.

Другой вариант - наследовать от диалога, а не от HTMLElement...

import {} from './modal-dialog.js'

class ImageSelector extends customElements.get('modal-dialog'){
    constructor(){
        super()
    }

    connectedCallback(){
        ... now what? ...
    }
}
window.customElements.define('image-selector', ImageSelector)

но если я это сделаю, как мне на самом деле заполнить слоты?

Наивный подход, конечно, состоял бы в том, чтобы просто использовать _shadow и поместить его во внутренний html слотов, но у меня такое чувство, что это не тот путь.