@vpaulo/vp-panel/src/panel.js

Panel component

export class PanelElement extends HTMLElement {
	constructor() {
		super();

		// Props
		this._open = false;
		this._summary = 'Panel';

		this._shadow = this.attachShadow({ mode: 'open' });
	}

	static get observedAttributes() {
		return ['open', 'summary'];
	}

	set open(value) {
		this._open = value === '' ? true : false;
	}

	get open() {
		return this._open;
	}

	set summary(value) {
		this._summary = value === '' ? 'Panel' : value;
	}

	get summary() {
		return this._summary;
	}

	setEvents() {
		this.summaryElement = this._shadow.querySelector('.summary');
		this.summaryElement.addEventListener('click', this.handleClick.bind(this));
	}

	handleClick() {
		this.toggleAttribute('open'); // this is the custom element

		// Dispatch an event that signals `<vp-accordion>` element.
		this.dispatchEvent(
			new CustomEvent('vp-panel:change', {
				detail: { isOpen: this.open },
				bubbles: true,
			})
		);
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name === 'open') this.open = newValue;
		if (name === 'summary') this.summary = newValue;
	}

	connectedCallback() {
		this._shadow.innerHTML = this.render();
		this.setEvents();
	}

	disconnectedCallback() {
		this.summaryElement.removeEventListener('click', this.handleClick.bind(this));
	}

	render() {
		return `<span class="summary">${this.summary}</span><div class="content"><slot></slot></div>`;
	}
}