Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

> when there is a true single party they seem mostly ok with the features available now because they can write stylesheets specially for shadow DOM, and share styles via constructible stylesheets.

This feels dismissive when multiple people have brought up in this very thread that the features currently available are not sufficient. Constructable stylesheets are not a solution because they require JavaScript. Any solution that has a client-side JS dependency is not a real solution, just a workaround. 

> ```tsx
> return <my-element>{children}<my-element>
> ```
> 
> ^ this React code will completely clear a component's own DOM if the component's not using shadow DOM. And this is what developers come to us complaining about when they disable shadow DOM in order to allow their customers to use existing legacy stylesheets.

As someone who regularly uses both React and web components, I would not expect this code to work. This is not a problem caused by light DOM or even React, it's more of a flawed assumption/expectation. There is no other HTML there that React knows about, so of course React will clear everything that is there. The "correct" way is to create a wrapper component that slots the `children` into the right place.

```js
<my-element>
  <div>{/* component's light DOM goes here */}</div>

  {children}
</my-element>
```

It helps if you look at the exact same thing implemented in a different framework that is closer to HTML. For example Astro or Enhance, using their (non-standard) server-side `<slot>` implementation:

```astro
<my-element>
  <div><!-- component's light DOM goes here --></div>

  <slot></slot>
</my-element>
```

If we're talking about a hypothetical light DOM slotting system, I would expect it to be built into HTML, somewhat like declarative shadow DOM but without the colocation requirement.

<details><summary>Example</summary>

```html
<body>
  <template for="my-content">
    <header>…</header>
    <main>
       <slot></slot>
    </main>
    <footer>…</footer>
  </template>

  <my-content>
    Content goes here!
  </my-content>
</body>
```

</details> 


And I would expect it to produce a single tree, quite like what we have today. If it produces different trees, then we might as well use shadow DOM, which brings us back to the original issue: styling in shadow DOM is too difficult. Something like `<template shadowrootmode="open-styleable">` would help a lot even if it doesn't solve all use cases.

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

Message ID: <WICG/webcomponents/issues/909/1893018966@github.com>

Received on Tuesday, 16 January 2024 03:32:40 UTC