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

## Terminology proposal

### Fully encapsulated
Fully encapsulated components ship with ONLY internal styles and are explicitly developed to NOT consume any external styles.

Shadow root mode `open` and `closed` currently solve this today.

**Examples**
Youtube video embad, google map, [playground-elements](https://github.com/google/playground-elements)

### Slightly encapsulated
Slight encapsulated components have some internal styles but also have some shared understanding about available external styles. 

Shadow root mode `open` does not currently solve this today.

**Examples**
- First-party components written for a specific application by the application owner/team.
- Design system / component library components written by a different person/team than the application in which the components are used.

**Example first-party component**
```html
<!-- index.html -->
<head>
<link rel="stylesheet" src="tailwind.css" />
<link rel="stylesheet" src="application-global-styles.css" />
</head>

<body>
  <hero-section><hero-section>
</body>
```

```css
/** hero-section.css **/
.hero {}
.hero-gradient-text-glow-effect {}
```
```js
// hero-section.js
render() {
  // aware of styles from tailwind.css
  return <div class="hero mt-4 pt-6">
    // and aware of application-global-styles
    <h1 class="hero-gradient-text-glow-effect">hero heading</h1>
  </div>
}
```

**Example design system component**
```html
<!-- index.html -->
<head>
<link rel="stylesheet" src="tailwind.css" />
<link rel="stylesheet" src="application-global-styles.css" />
</head>

<body>
  <design-system-button><design-system-button>
</body>
```
```css
/** design-sytem-button.css **/
.button-primary {}
```
```js
// design-system-button.js
// ... component class
render() {
  // aware of tailwind styles, and internal component styles,
  // but NOT application-global-styles
  return <button class="button-primary bg-teal-100">some button</button>
}
```

### Headless
Component ships with no styles or very basic styles with the intent on ALWAYS needing to be overridden

Shadow root mode `open` does not solve this right now today.

**Examples**
- Markdown renderer component that turns markdown into HTML
- [Headless UI](https://headlessui.com/)

**Example component code**

```html
<!-- index.html -->
<head>
<link rel="stylesheet" src="tailwind.css" />
<link rel="stylesheet" src="application-global-styles.css" />
</head>

<body>
  <headless-accordion><headless-accordion>
</body>
```
```js
// headless-accordion.js
render() {
  return <details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>
}
```


### Problem statement

Component developers today cannot create slightly encapsulated components or headless components using shadow dom.

### Related questions
1. Should application/page developers be able to override styles in a shadow root regardless of what kind of encapsulation the component is meant to have?





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

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

Received on Saturday, 10 February 2024 20:46:57 UTC