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

Accordion component

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

		// Props
		this._multiple = false;

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

	static get observedAttributes() {
		return ['multiple'];
	}

	set multiple(value) {
		this._multiple = value === '' ? true : false;
	}

	get multiple() {
		return this._multiple;
	}

	onChange(event) {
		if (this.multiple) return;

		this.panels.forEach(element => {
			if (element !== event.target && event.detail.isOpen) {
				element.removeAttribute('open');
			}
		});
	}

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

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

		// `<vp-panel>` emit a custom event when is opened or closed
		this.addEventListener('vp-panel:change', this.onChange);

		customElements.whenDefined('vp-panel').then(() => {
			[...this.panels] = this.querySelectorAll('vp-panel');
		});
	}

	disconnectedCallback() {
		this.removeEventListener('vp-panel:change', this.onChange);
	}

	render() {
		return '<slot></slot>';
	}
}