Re: [WICG/webcomponents] Possibile way for cross shadowDom exclusive interactive elements (Issue #1054)

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