Skip to content

fix(block): fix rendering tied to named-slot content#10449

Merged
driskull merged 4 commits intodevfrom
dris0000/block-getSlotted-remove
Oct 1, 2024
Merged

fix(block): fix rendering tied to named-slot content#10449
driskull merged 4 commits intodevfrom
dris0000/block-getSlotted-remove

Conversation

@driskull
Copy link
Copy Markdown
Member

@driskull driskull commented Sep 30, 2024

Related Issue: #6059

Summary

  • remove use of getSlotted utility
  • replace with slotchange event and @State variables to update the display of elements.
  • existing tests should suffice

@github-actions github-actions Bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Sep 30, 2024
await page.waitForChanges();

const element = await page.find("calcite-block");
const content = await page.find(`calcite-block >>> section.${CSS.content}`);
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found something weird here. When using the >>> piercing selector, it was finding some other CSS.content class that is a div. Adding section in front of this fixed it but Its also concerning it was finding this element which it shouldn't find. Using an id is fine too.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree it can be confusing, but this is working as expected (see https://stenciljs.com/docs/end-to-end-testing#find-an-element-in-the-shadow-dom). This also came up in a Stencil issue.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. I didn't know it searched all shadow roots. good to know!

@driskull driskull marked this pull request as ready for review September 30, 2024 22:32
jcfranco

This comment was marked as duplicate.

Copy link
Copy Markdown
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! WDYT about fix rendering tied to named-slot content (or similar) to add a bit more context?

@driskull driskull changed the title fix(block): properly handle slotted elements fix(block): fix rendering tied to named-slot content Sep 30, 2024
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 1, 2024
@driskull driskull merged commit a53540b into dev Oct 1, 2024
@driskull driskull deleted the dris0000/block-getSlotted-remove branch October 1, 2024 16:20
@github-actions github-actions Bot added this to the 2.13.1 patch milestone Oct 1, 2024
benelan pushed a commit that referenced this pull request Feb 8, 2025
**Related Issue:** #6059

## Summary

- remove use of `getSlotted` utility
- replace with `slotchange` event and `@State` variables to update the
display of elements.
- existing tests should suffice
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants