Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[✨] Access Slots in parent component #4892

Closed
GrandSchtroumpf opened this issue Jul 31, 2023 · 1 comment
Closed

[✨] Access Slots in parent component #4892

GrandSchtroumpf opened this issue Jul 31, 2023 · 1 comment
Labels
STATUS-3: won't be worked on We're not planning to work on this TYPE: enhancement New feature or request

Comments

@GrandSchtroumpf
Copy link
Contributor

Is your feature request related to a problem?

I've got a Select element and I want to display the content of the selected option :

<Select value="a">
  <Option value="a">Hello <b>World</b></Option>
  <Option value="b">Lorem Ipsum</Option>
</Select>

Here the Select has the default value selected to "a" so it should display the content of the Option with value "a".
As we cannot access the DOM in the server, I wanted to access the elements in the Slot and find the one with the value.
Unfortunately, this is possible with children, but not with Slot.

Describe the solution you'd like

Access a Readonly list of the JSXNode like you would do with children. Maybe something like that :

export const Select = component$(({ value, placeholder }: SelectProps) => {
  const slots = useSlot(); // snapshot of the elements in the Slot
  const initialContent = slots.default.find((option) => option.props.value === value) ?? '';
  const displayContent = useSignal(initialContent);
  
  return <>
    <button>{displayContent.value ?? placeholder}</button>
    <dialog>
      <Slot/> {/* Options here */}
    </dialog>
  </>
});

Describe alternatives you've considered

Use inline component and children.
Or use DOM manipulation in the server if it becomes possible.

Additional context

No response

@GrandSchtroumpf GrandSchtroumpf added TYPE: enhancement New feature or request STATUS-1: needs triage New issue which needs to be triaged labels Jul 31, 2023
@shairez shairez added STATUS-3: won't be worked on We're not planning to work on this and removed STATUS-1: needs triage New issue which needs to be triaged labels May 25, 2024
@shairez
Copy link
Contributor

shairez commented May 25, 2024

Thanks for the feature suggetion!
closing for now because of:
#3966 (comment)

@shairez shairez closed this as completed May 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-3: won't be worked on We're not planning to work on this TYPE: enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants