class TopicFilter extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.render();
this.setupEvents();
}
render() {
const dark = document.documentElement.classList.contains('dark');
this.shadowRoot.innerHTML = `
Filter:
`;
}
setupEvents() {
const buttons = this.shadowRoot.querySelectorAll('.filter-btn');
buttons.forEach(btn => {
btn.addEventListener('click', () => {
buttons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filter = btn.dataset.filter;
window.dispatchEvent(new CustomEvent('filterchange', { detail: { filter } }));
});
});
}
}
customElements.define('topic-filter', TopicFilter);