[WICG/webcomponents] CSS Appearance for Constructable Stylesheets (Issue #957)

I came across an idea where it may be helpful to be able to control a custom element's default applied styles from a Constructable Stylesheet using the CSS `appearance` property.

My custom element has a stylesheet applied to it to provide it with it's proper layout, and another to add a few nice visual styles like focus borders and extra padding.

Ideally, it would be great to provide all of the default styles to the users of my custom element, and then give them the choice to remove any as needed to meet their requirements for the custom element, similar to what you can do with `appearance` for built-in HTML elements and user-agent styles.

I think it may be helpful if there was an option to specify if a Constructable Stylesheet can be toggled off using the `appearance` CSS property on the parent custom element. For example, a possible use case could be something along the lines of this:

```css
/* My element "user-agent" styles */

:host {
  display: block;
}
```

```css
/* My element "appearance" styles */

:host {
  color: #000000;
  background: #ffffff;
  border: 2px solid #00000040;
  border-radius: 4px;
}

:host:hover {
  background-color: #eaeaea;
}
```

```html
<my-element>
  #shadow-root (open)
    <!-- "user-agent" CSSStyleSheet -->
    <!-- "appearance" CSSStyleSheet -->
</my-element>
```

Say the user for `<my-element>` wanted to remove the default styles applied by the "appearance" stylesheet, they could then add this to their light DOM styles for the element, and it would then hide those default styles from applying to that element:

```css
/* My element light DOM custom user styles */

my-element {
  appearance: none;
}
```

The end result of this property added by the custom element user would then hide the default styles applied by the "appearance" stylesheet, in return hiding the custom hover effect and element colors.

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

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