Closes #20095

With Layer stories do not respond to controls beyond the first layer. An initial fix was introduced in #21267. However, that update did not account for nested elements or components with children.

Two solutions are introduced in the PR:

Enhanced Clone-and-Sync Approach

The existing implementation has been updated to sync attributes for child elements in addition to the root component. This solves the problem to some extent, but the sb-template-layers Storybook template component's clone-and-sync approach has a fundamental limitation:

The MutationObserver cannot differentiate between:

• Storybook control changes (e.g., disabled, invalid, size) - should be synced across layers
• User interaction changes (e.g., open, value, aria-expanded) - should remain independent per layer

This causes issues with interactive components like multi-select, where clicking the top layer component would inadvertently trigger state changes in the cloned layers below, resulting in focus jumping and unexpected behavior.

Workaround:

const skipAttributes = ['open', 'value', 'aria-expanded', 'aria-activedescendant', 'aria-selected'];

This array prevents syncing of interaction-based attributes, but it is not a proper solution as it requires manual maintenance and is brittle.

Render Function Approach

Introduced a new renderContent property that accepts a render function, enabling a declarative approach:

@property({ attribute: false })
renderContent?: () => TemplateResult;

Usage:

const renderMultiSelect = () => html`
  <cds-multi-select ...props>
    <cds-multi-select-item>...</cds-multi-select-item>
  </cds-multi-select>
`;

return html`
  <sb-template-layers .renderContent=${renderMultiSelect}>
  </sb-template-layers>
`;

Benefits:

This implementation eliminates the challenges associated with attribute synchronization and is much cleaner. While a slot-based approach is generally preferable in Web Components, in this case, the render function approach is more beneficial because the chances of unwanted side effects are significantly lower compared to the existing implementation.

Trade-off:

The only downside is that all Layer stories across components would need to be updated to use this approach. To address this, the original code has been preserved, and renderContent has been added as a new option, allowing both approaches to coexist.

Changelog

New

• Added renderContent based implementation option in the layer template.
• Updated Multiselect Layer stories with this new implementation.

Changed

The following changes have been made to packages/web-components/.storybook/templates/with-layer.ts:

• Updated the MutationObserver to watch for attribute changes within the subtree.
• Updated the cloned items in layers one and two to reflect these attribute changes with skipAttributes.

Testing / Reviewing

Review the With Layer story for any component that has controls enabled. Changes made through the controls should be reflected across all layers, not just the top layer.

The following components previously had issues in their With Layer stories, and the behavior can be verified there:

• Combo box
• Content switcher
• Dropdown
• Multi select
• Text input

Also, verify the Multi select With Layer stories to ensure the new implementation works as expected.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide