customElements.define('suggestion-window', class extends HTMLElement { connectedCallback() { if (this.rendered) return; this.render(); this.rendered = true; } render() { const shadow = this.shadowRoot ?? this.attachShadow({mode: 'open'}); shadow.innerHTML = ` <style> ul.dropdown-menu { overflow: auto; white-space: nowrap; /*文字列を折り返さない*/ text-align: left; list-style: none; backgroud-color: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,0.175); box-sizing: border-box; } div.dropdown { position: absolute; box-sizing: border-box; } </style> <div id="window" class="dropdown" style=`"top: ${this.getAttribute('top')}px; left: ${this.getAttribute('left')}px;"`> <ul class="dropdown-menu" role="menu"> </ul> </div>`; } static get observedAttributes() { return ['top','left']; } attributeChangedCallback(name, oldValue, newValue) { this.render(); } hide() { document.getElementById('window').hidden = false; } show() { document.getElementById('window').hidden = true; } push(...items) { } clear() { } });