import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'wcc-frame': WccFrame; } } @customElement('wcc-frame') export class WccFrame extends DeesElement { @property() public viewport: string; public static styles = [ css` :host { border: 10px solid #ffaeaf; position: absolute; background: ${cssManager.bdTheme('#333', '#000')}; left: 200px; right: 0px; top: 0px; bottom: 100px; overflow-y: auto; overflow-x: auto; } .viewport { container-type: inline-size; container-name: wccToolsViewport; position: relative; min-height: 100%; } `, ] public render(): TemplateResult { return html`
`; } public async getDisplayedInstance() { await this.updateComplete; const slottedContent = this.children; console.log(slottedContent); } public async getViewportElement(): Promise { return this.shadowRoot.querySelector('.viewport') as HTMLElement; } }