Working Turbo Frames called from the Shadow Dom

[stedekay]

I am trying to create a Button Component (with Lit) with a data-turbo-frame attribute. The component looks like this:

import {html, LitElement} from "lit";

export class NavButton extends LitElement {
    static get properties() {
        return {
            path: {type: String},
            label: {type: String},
        }
    }

    render() {
        return html`
            <a href="${this.path}" data-turbo-frame="body">
                ${this.label}
            </a>
        `;
    }

    connectedCallback() {
        super.connectedCallback();
        window.addEventListener('turbo:visit', this.handleVisit);
    }

    disconnectedCallback() {
        window.removeEventListener('turbo:visit', this.handleVisit);
        super.disconnectedCallback();
    }

    handleVisit = (event) => {
        const anchorElement = this.shadowRoot.querySelector('a');

        if (event.detail.url.endsWith(this.path)) {
            anchorElement.style.fontWeight = 'bold';
        } else {
            anchorElement.style.fontWeight = 'normal';
        }
    }
}

customElements.define('nav-button', NavButton);

The basic layout is the following:

<nav>
    <nav-button path="/desktop" label="Desktop"></nav-button>
    <nav-button path="/about" label="About"></nav-button>
</nav>
<div>
    <turbo-frame id="body" data-turbo-action="advance">
    </turbo-frame>
</div>

It isn't working as expected. The whole page gets rerendered instead of the frame. I assume the reason is the shadow dom. When I disable the shadow dom with

createRenderRoot() {
    return this;
}

in the NavButton element everything works as expected.

I am not sure if this is a bug or I messed up. Maybe someone can help me out.

[yuki24]

@stedekay What version of Turbo are you using? I believe this has been fixed by #802.

[stedekay]

Sorry, forgot to mention it: I am using the newest version 7.3.0. Maybe the difference is that I use the attribute inside the element not on the custom element itself? 07.10.2023 05:10:55 Yuki Nishijima ***@***.***>:

…

@stedekay[https://github.com/stedekay] What version of Turbo are you using? I believe this has been fixed by #802[#802]. — Reply to this email directly, view it on GitHub[#1021 (comment)], or unsubscribe[https://github.com/notifications/unsubscribe-auth/AAIFTSFEGP5V7YXSLDETJIDX6DB33AVCNFSM6AAAAAA5WHCDRKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONJRGU3TSOJWGU]. You are receiving this because you were mentioned. [Verfolgungsbild][https://github.com/notifications/beacon/AAIFTSE5TGFH2QO6ILTYPTLX6DB33A5CNFSM6AAAAAA5WHCDRKWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTIM36T2.gif]