From da40e2b36e607c15d021689a802e027763d58744 Mon Sep 17 00:00:00 2001 From: Casey Watts Date: Fri, 4 Oct 2024 18:33:34 -0400 Subject: [PATCH 1/4] Documentation for queryAssignedNodes Based on the discussion on Discord: https://discord.com/channels/1012791295170859069/1291879150654849048/1291879150654849048 --- .../lit-dev-content/site/docs/v3/components/shadow-dom.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md index cf36a093f..6aa321b22 100644 --- a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md +++ b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md @@ -187,7 +187,9 @@ get _slottedChildren() { } ``` -You can also use the `slotchange` event to take action when the assigned nodes change. +The nodes are assigned after the slot is rendered, so you need to check them in `updated`, or if you want to use them in rendering, you can use `slotchange`. + +You can use the `slotchange` event to take action when nodes are first assigned or change. The following example extracts the text content of all of the slotted children. ```js From 47604d64eca6c59867c75dd1334b96e8dc4d7e3c Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Thu, 27 Feb 2025 08:52:54 +1100 Subject: [PATCH 2/4] reword and put in aside --- .../lit-dev-content/site/docs/v3/components/shadow-dom.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md index 6aa321b22..65f798bca 100644 --- a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md +++ b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md @@ -176,8 +176,12 @@ You can specify fallback content for a slot. The fallback content is shown when ## Accessing slotted children { #accessing-slotted-children } +{% aside "info" %} + To access children assigned to slots in your shadow root, you can use the standard `slot.assignedNodes` or `slot.assignedElements` methods with the `slotchange` event. +{% endaside %} + For example, you can create a getter to access assigned elements for a particular slot: ```js @@ -187,7 +191,7 @@ get _slottedChildren() { } ``` -The nodes are assigned after the slot is rendered, so you need to check them in `updated`, or if you want to use them in rendering, you can use `slotchange`. +The elements are assigned only after the slot is rendered, so if you need to access assigned elements at startup, you need to wait for `firstUpdated` or `updated`. If you want to access assigned elements when your render changes, you can use `slotchange`. You can use the `slotchange` event to take action when nodes are first assigned or change. The following example extracts the text content of all of the slotted children. From 3b43f7c4a4e0f0824639119b702a6d6ad2ea1b54 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Thu, 27 Feb 2025 08:54:13 +1100 Subject: [PATCH 3/4] move aside to correct location --- .../lit-dev-content/site/docs/v3/components/shadow-dom.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md index 65f798bca..541522934 100644 --- a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md +++ b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md @@ -176,12 +176,8 @@ You can specify fallback content for a slot. The fallback content is shown when ## Accessing slotted children { #accessing-slotted-children } -{% aside "info" %} - To access children assigned to slots in your shadow root, you can use the standard `slot.assignedNodes` or `slot.assignedElements` methods with the `slotchange` event. -{% endaside %} - For example, you can create a getter to access assigned elements for a particular slot: ```js @@ -191,8 +187,12 @@ get _slottedChildren() { } ``` +{% aside "info" "no-header" %} + The elements are assigned only after the slot is rendered, so if you need to access assigned elements at startup, you need to wait for `firstUpdated` or `updated`. If you want to access assigned elements when your render changes, you can use `slotchange`. +{% endaside %} + You can use the `slotchange` event to take action when nodes are first assigned or change. The following example extracts the text content of all of the slotted children. From 0f2b5fa078050da9ca44837ca9fcd17942e2f3c1 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Thu, 27 Feb 2025 09:06:05 +1100 Subject: [PATCH 4/4] add aside header for visibility --- .../lit-dev-content/site/docs/v3/components/shadow-dom.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md index 541522934..a8b3a14d5 100644 --- a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md +++ b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md @@ -187,9 +187,11 @@ get _slottedChildren() { } ``` -{% aside "info" "no-header" %} +{% aside "info" %} -The elements are assigned only after the slot is rendered, so if you need to access assigned elements at startup, you need to wait for `firstUpdated` or `updated`. If you want to access assigned elements when your render changes, you can use `slotchange`. +The elements are assigned only after the slot is rendered. + +If you need to access assigned elements at startup, you need to wait for `firstUpdated` or `updated`. If you want to access assigned elements when your render changes, you can use `slotchange`. {% endaside %}