import styles from '!raw-loader!sass-loader!./styles/app-scroll-button.scss';

class AppScrollButton extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		const root = this.attachShadow({ mode: 'open' });

		const style = document.createElement('style');
		style.textContent = styles;
		root.appendChild(style);

		const button = document.createElement('div');
		button.className = 'button';
		button.onclick = () => {
			document
				.getElementById(this.dataset.anchor)
				.scrollIntoView({ behavior: 'smooth' });
		};
		root.appendChild(button);
	}

	static get observedAttributes() {
		return ['data-anchor'];
	}
}

customElements.define('app-scroll-button', AppScrollButton);
