Re: [w3c/webcomponents] idea: Allow light DOM to delegate styles/behavior to shadow DOM (#883)

Sure thing, what I'm thinking is that a light DOM author might want to give control to part of its markup to some parent. Imagine this being like a design system implementation:

```javascript
const sheet = new CSSStyleSheet();
sheet.replace(`
  ::control(ds-input) {
    border: 2px solid tomato;
    background: gainsboro;
  }
`);
class DesignSystem extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.adoptedStyleSheets = [sheet];
    root.innerHTML = `<slot></slot>`;
    // other stuff maybe
  }
}

customElements.define('x-ds', DesignSystem);
```

then in the HTML

```html
<x-ds>
  <h1>Whatever</h1>

  <form>
    <label for="whatever">
    <input id="whatever" name="whatever" control="ds-input">
  </form>
</x-ds>
```

That's a really simple example, but it illustrates the idea. Let's make it a bit more concrete, imagine you're defining a specialized dialog component that your users might have a need to control the close button but still want it to be styled by the shadow host:

```javascript
const sheet = new CSSStyleSheet();
sheet.replace(`
  ::control(close-btn) {
    background: url(someSVGThatLooksLikeAnX) no-repeat;
  }
`);

class Dialog extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.adoptedStyleSheets = [sheet];
    root.innerHTML = `<slot></slot>`;

    if (this.controls['close-btn']) {
      this.controls['close-btn'].addEventListener('click', this.close.bind(this));
    }
  }

  close() { /* magic */ }
}
```

Then there are two uses of the above component: 

1. A confirmation/decision dialog where the close button might not be present because the user needs to make a decision
2. An informational dialog that can be dismissed by clicking an optional button. 

Let's take scenario two further, say our dialog also has special heading styles, it doesn't matter how deeply nested the headings might be in the DOM structure, an API like this could allow the shadow host to style those and still not break encapsulation because the child has opted in to the change rather than having it forced.

```html
<x-dialog>
  <heading>
    <h1 control="dialog-h1">Hello world</h1>
    <button control="close-btn" aria-label="close" onclick="someCallback"></button>
  </heading>
  <section>
    <h2 control="dialog-h2">How are you doing?</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </section>
</x-dialog>
```



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