Блог

У меня есть App.ts, содержащий два веб-компонента.

Приложение.ts

 import { html } from 'hybrids';

export const App = {
    render: () => html`
        <dcs-sidebar onsidebar-collapse="${doSomething}"></dcs-sidebar>
        <dcs-content></dcs-content>
    `,
};

function doSomething(host: any, event: any) {
    let ContentContainer = host.shadowRoot.querySelector('dcs-content').shadowRoot.querySelector('.Content');

    ContentContainer.style.setProperty('margin-left', '80px');
}
 

И я хочу изменить html-тег внутри <dcs-content> на основе <dcs-sidebar> нажатия кнопки.

Я смог заставить родителя App.ts прослушивать событие с помощью диспетчеризации. И внутри App.ts я могу получить доступ к DOM, чтобы внести изменения, но я думаю, что это не лучший способ.

Боковая панель.ts

 import { html, dispatch } from 'hybrids';

export const Sidebar = {
    render: () => html`
        <style> ... </style>

        <div class="Sidebar">
            <button onclick="${collapseSidebar}">
        </div>
    `,
};

function collapseSidebar(host:any, event:any) {
    const sidebar = host.shadowRoot.querySelector('.Sidebar');

    sidebar.style.width === '80px';

    dispatch(host, 'sidebar-collapse')
}