- From: woody-li <notifications@github.com>
- Date: Wed, 11 Dec 2024 22:57:29 -0800
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
Received on Thursday, 12 December 2024 06:57:33 UTC
How about something like [referenceTarget](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md#-phase-1-shadowroot-referencetarget-attribute).
## Proposal: relation target
Expose an element's relationship outwards to solve relative interactive behavior, such as the exclusive.
### relationTarget (maybe other name)
I'm not sure to set it by `id` or `name`.
#### Using ShadowRootInit field
```javascript
customElements.define(
"my-radio",
class Radio extends HTMLElement {
constructor() {
super();
this.shadowRoot_ = this.attachShadow({
mode: "closed",
relationTarget: "real-input", // Set by id.
relationTarget: "radio-group", // Set by name.
});
this.shadowRoot_.innerHTML = `<input id="real-input" type="radio" name="radio-group">`;
}
}
);
```
#### Using declarative shadow DOM
```html
<template
shadowrootmode="closed"
relationtarget="real-input"
relationtarget="radio-group"
>
<input id="real-input" type="radio" name="radio-group">
</template>
```
--
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1054#issuecomment-2537965391
You are receiving this because you are subscribed to this thread.
Message ID: <WICG/webcomponents/issues/1054/2537965391@github.com>
Received on Thursday, 12 December 2024 06:57:33 UTC