feat: support for `referenceTarget` shadow DOM feature

[Noleli]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

When working with shadow DOM, it has historically not been possible to use IDREFs across shadow boundaries. This make it impossible to apply external labels or any relevant ARIA properties to an element (such as a form control) inside a component’s shadow root.

A recent web standard proposal, referenceTarget, addresses many of these challenges, and is now supported behind a flag in all major browsers.

This feature request is to add support for this web platform feature to Stencil.

Describe the Use Case

Support for referenceTarget would allow authors who use Stencil-created custom elements that embed reference targets in their shadow roots to use ID references to apply labels, ARIA attributes, and other IDREF-based features to those elements.

For example, say you have a Stencil component with the following rendered DOM structure:

<my-input>
  #shadow-root
    <div class="some-other-element"></div>
    <input id="internal-input">
</my-input>

If attachShadow() were called with attachShadow({ referenceTarget: "internal-input" }), an author would be able to apply a label as they would to any native form control:

<label for="name-input">Name</label>
<my-input id="name-input"></my-input>

Describe Preferred Solution

I would expect this to be an option on the shadow component option.

boolean | { delegatesFocus?: boolean, slotAssignment?: 'manual' | 'named', referenceTarget?: string }

Using it to create the custom element from the example above:

@Component({
  tag: "my-input",
  shadow: {
    referenceTarget: "internal-input",
    delegatesFocus: true
  },
  formAssociated: true
})

Describe Alternatives

No response

Related Code

No response

Additional Information

No response