This adds support for building form-associated custom elements in
Stencil components, allowing Stencil components to participate in HTML
forms in a rich manner. This is a popular request in the Stencil
community (see #2284).

A minimal Stencil component that uses the new APIs to integrate with a
form could look like this:

```tsx
import { Component, h, AttachInternals } from '@stencil/core';

@component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
  formAssociated: true
})
export class MyComponent {
  @AttachInternals() internals: ElementInternals;

  render() {
    return <div>Hello, World!</div>;
  }
}
```

The new form-association technology is exposed to the

- A new option called `formAssociated` has been added to the
  [`ComponentOptions`](https://github.com/ionic-team/stencil/blob/06f6fad174c32b270ce239afab5002c23d30ccbc/src/declarations/stencil-public-runtime.ts#L10-L55)
  interface.
- A new `@AttachInternals()` decorator can be used to indicate a
  property on a Stencil component to which an
  [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
  object will be bound at runtime.
- Using `@AttachInternals()` is supported both for lazy builds
  ([`www`](https://stenciljs.com/docs/www),
  [`dist`](https://stenciljs.com/docs/distribution)) as well as for
  [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements).

The new behavior is implemented at compile-time, and so should result in
only very minimal increases in code / bundle size. Support exists for
using form-associated components in both the lazy and the CE output
targets, as well as some extremely minimal provisions for testing.

Documentation for this feature was added to the Stencil site here:
stenciljs/site#1247

This adds support for building form-associated custom elements in
Stencil components, allowing Stencil components to participate in HTML
forms in a rich manner. This is a popular request in the Stencil
community (see #2284).

A minimal Stencil component that uses the new APIs to integrate with a
form could look like this:

```tsx
import { Component, h, AttachInternals } from '@stencil/core';

\@component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
  formAssociated: true
})
export class MyComponent {
  @AttachInternals() internals: ElementInternals;

  render() {
    return <div>Hello, World!</div>;
  }
}
```

The new form-association technology is exposed to the

- A new option called `formAssociated` has been added to the
  [`ComponentOptions`](https://github.com/ionic-team/stencil/blob/06f6fad174c32b270ce239afab5002c23d30ccbc/src/declarations/stencil-public-runtime.ts#L10-L55)
  interface.
- A new `@AttachInternals()` decorator can be used to indicate a
  property on a Stencil component to which an
  [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
  object will be bound at runtime.
- Using `@AttachInternals()` is supported both for lazy builds
  ([`www`](https://stenciljs.com/docs/www),
  [`dist`](https://stenciljs.com/docs/distribution)) as well as for
  [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements).

The new behavior is implemented at compile-time, and so should result in
only very minimal increases in code / bundle size. Support exists for
using form-associated components in both the lazy and the CE output
targets, as well as some extremely minimal provisions for testing.

Documentation for this feature was added to the Stencil site here:
stenciljs/site#1247

This adds support for building form-associated custom elements in
Stencil components, allowing Stencil components to participate in HTML
forms in a rich manner. This is a popular request in the Stencil
community (see #2284).

The new form-association technology is exposed to the component author
via the following changes:

- A new option called `formAssociated` has been added to the
  [`ComponentOptions`](https://github.com/ionic-team/stencil/blob/06f6fad174c32b270ce239afab5002c23d30ccbc/src/declarations/stencil-public-runtime.ts#L10-L55)
  interface.
- A new `@AttachInternals()` decorator can be used to indicate a
  property on a Stencil component to which an
  [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
  object will be bound at runtime.
- Using `@AttachInternals()` is supported both for lazy builds
  ([`www`](https://stenciljs.com/docs/www),
  [`dist`](https://stenciljs.com/docs/distribution)) as well as for
  [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements).

The new behavior is implemented at compile-time, and so should result in
only very minimal increases in code / bundle size. Support exists for
using form-associated components in both the lazy and the CE output
targets, as well as some extremely minimal provisions for testing.

Documentation for this feature was added to the Stencil site here:
stenciljs/site#1247

)

This adds support for building form-associated custom elements in
Stencil components, allowing Stencil components to participate in HTML
forms in a rich manner. This is a popular request in the Stencil
community (see #2284).

The new form-association technology is exposed to the component author
via the following changes:

- A new option called `formAssociated` has been added to the
  [`ComponentOptions`](https://github.com/ionic-team/stencil/blob/06f6fad174c32b270ce239afab5002c23d30ccbc/src/declarations/stencil-public-runtime.ts#L10-L55)
  interface.
- A new `@AttachInternals()` decorator can be used to indicate a
  property on a Stencil component to which an
  [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
  object will be bound at runtime.
- Using `@AttachInternals()` is supported both for lazy builds
  ([`www`](https://stenciljs.com/docs/www),
  [`dist`](https://stenciljs.com/docs/distribution)) as well as for
  [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements).

The new behavior is implemented at compile-time, and so should result in
only very minimal increases in code / bundle size. Support exists for
using form-associated components in both the lazy and the CE output
targets, as well as some extremely minimal provisions for testing.

Documentation for this feature was added to the Stencil site here:
stenciljs/site#1247