Re: [WICG/webcomponents] Web components should be able to easily adapt to the host page while maintaining enapsulation (Issue #986)

@caridy I think we probably have different frames of reference. E.g. a gallery is not a very good example, since it's common to want to style its controls differently from the general button styles of the rest of the page. I mentioned several examples in the OP but if you want a more concrete example, here's a more concrete example inspired from the component that finally pushed me to make an issue about this (but I have encountered the issue dozens of times while building many different types of components):

Suppose you have an `<img-input>` component for uploading or linking to images. The user-facing UI is an `<input>` (for entering URLs or editing filenames) next to a `<button>` (for uploading). Its markup could look something like this (simplified):

```html
<img-input>
 #shadow-root
  <style>/* internal styles */</style>
  <div id="drop-zone" part="dropzone">
   <input id="url" part="input location">
   <div id="upload-wrapper">
    <input type="file" accept="image/*">
    <button part="button browse-button">Browse…</button>
   </div>
   <img id="preview" part="preview">
  </div>
</img-input>
```

with a sample rendering like this:

<img width="493" alt="image" src="https://user-images.githubusercontent.com/175836/223539841-b42f12f0-ad8a-4cbc-a717-4a10ecd4d8d4.png">


Now, you want that input and that button to be styled like every other input or button in the rest of the page, right?
- You don't want the page author to have to reach into their styling framework and add `::part(input)` or `::part(button)` for that. 
- You don't want the page author to have to reflect their entire form styling into custom properties like `--button-background`, `--button-border`, `--button-hover-background`, `--button-hover-border` etc etc
- You don't want to put these controls in the light DOM just so they are styled like the rest of the page, because you still want the encapsulation of the rest of the tree around them
- You don't want to make these slots so that authors have to write things like:
```html
<img-input>
 <input slot="input" />
 <button slot="browse">Browse…</button>
</img-input>
```
just so they can use your component, right? Boilerplate repetition is exactly what WC are trying to curb.
- I suppose one viable solution might be to have slots like the above, and imperatively *generate* content for the slots if they are empty. I guess this could work but it feels like a hack, and is fairly *weird*.

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

Message ID: <WICG/webcomponents/issues/986/1458842187@github.com>