Re: [csswg-drafts] [css-view-transitions-1] Should view transition names be tree scoped? (#10145)

Just implemented my first try with new approach. 

`index.html`
```css
p-card::part(card),
 p-home::part(card) {
 view-transition-name: card;
}
```

`p-home.ts`
Somewhere in `render` method... 
Conditionally set part="card" attribute
```ts
html`${this.paginated.map(card => {
 return html`<li>
  ${card === this.activeCard
   ? html`<e-card-with-sources
     .name=${card}
     .divcordTable=${this.divcordTable}
     .cardSize=${this.cardSize}
     .sourceSize=${this.sourceSize}
     @navigate=${() => this.#setActiveCard(card)}
     part="card"
     ></e-card-with-sources>`
   : html`<e-card-with-sources
     .name=${card}
     .divcordTable=${this.divcordTable}
     .cardSize=${this.cardSize}
     .sourceSize=${this.sourceSize}
     @navigate=${() => this.#setActiveCard(card)}
     ></e-card-with-sources>`}
 </li>`;
})}`;
```
And there is activeCard?:string global state to set it on p-home render and update on navigate.
Not too bad, to be honest 🤓 
https://divicards-site.pages.dev/
    

-- 
GitHub Notification of comment by shonya3
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10145#issuecomment-2273891490 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 7 August 2024 16:45:24 UTC