Re: [WICG/webcomponents] Shadow DOM mode as opt-in feature flags (Issue #1049)

@rniwa Here's how I see those working.

### Omitting `encapsulate-ids`

Allowing ids inside of a Shadow DOM to be referenced by things outside of a Shadow DOM enables at least two usecases that I can think of. The first is for single-use page-layout web components that contain landmarks. Consider a blog with posts and comments. It's possible that people may want to share a deep-link to the comments section of a post using `https://example.com/blog/post/1234#comments`. You could implement this with a `<blog-layout>` component that exposes `post` and `comment` slots:

```html
<blog-layout>
  <span slot="blog-title">Blog post</span>
  <article slot="blog-post">Lorem ipsum</article>
  <article slot="blog-comment">Dolor sit amet</article>
  <article slot="blog-comment">Consectetur adipiscing</article>
</blog-layout>
```

The `<blog-layout>` component could have a Shadow DOM structure that includes landmark ids like so:

```html
<main id="post">
  <h1><slot name="blog-title"></slot></h1>
  <slot name="blog-post"></slot>
</main>
<aside id="comments">
  <h2>Comments</h2>
  <slot name="blog-comment"></slot>
</aside>
```

It is not currently possible to deep link to `id="comments"` using the URL hash `#comments`. Omitting `encapsulate-ids` would allow for this use case. This example could also be implemented with declarative Shadow DOM which is especially helpful for frameworks that provide HTML streaming:

```html
<div>
  <template shadowrootmode="none">
    <main id="post">
      <h1><slot name="blog-title"></slot></h1>
      <slot name="blog-post"></slot>
    </main>

    <aside id="comments">
      <h2>Comments</h2>
      <slot name="blog-comment"></slot>
    </aside>
  </template>

  <span slot="blog-title">Blog post</span>
  <article slot="blog-post">Lorem ipsum</article>
  <article slot="blog-comment">Dolor sit amet</article>
  <article slot="blog-comment">Consectetur adipiscing</article>
</div>
```

See: https://stackoverflow.com/questions/43425398/anchor-tag-a-id-jump-with-hash-inside-shadow-dom

The second use case is when It may be helpful for some Shadow DOM roots to be able to expose ids for use by `aria` and `for` attributes. This is a pretty contrived example, but should serve to illustrate the feature. I'll use declarative Shadow DOM here to make it easier to track what's happening.

```html
<name-label>
  <template shadowrootmode="none">
    <label id="name-label" for="name-field">Name</label>
  </template>
</name-label>
<name-field>
  <template shadowrootmode="none">
    <input type="text" id="name-field" aria-labelledby="name-label" />
  </template>
</name-field>
```

It is not currently possible to do this. The label and input can have no knowledge of each other.

See: https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/

### Omitting `encapsulate-events`

Allowing events to escape the Shadow DOM makes it much easier to implement certain things like `<custom-button>`. If you let click events bubble out of the Shadow DOM you needn't re-emit click events from the internal `<button>` of a `<custom-button>` nor wire up complicated form associated callbacks and `FormData` handling for things like an `<address-fieldset>` component which could expose various sets of fields based on the selected country.

```html
<form action="/buy">
  <address-fieldset>
    <template shadowrootmode="none">
      <input type="text" name="streetAddress" />
      <input type="text" name="city" />
      <input type="text" name="province" />
      <input type="text" name="postalCode" />
      <select name="country">...</select>
    </template>
  </address-fieldset>
  <custom-button>
    <template shadowrootmode="none">
      <button>Click Me</button>
    </template>
  </custom-button>
</form>
```

This looks a bit silly using declarative Shadow DOM, but becomes much clearer when you look at an example of what it currently takes to implement a custom button: https://github.com/shoelace-style/shoelace/blob/next/src/components/button/button.component.ts#L212-L255

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1049#issuecomment-1939774460
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1049/1939774460@github.com>