Re: [w3c/webcomponents] Theming options for shadow roots (#864)

One of the hazards with `::theme` is that it might capture names from shadow roots unintentionally rather than opt-in.

I feel like most of the objections with using it for theming could be solved by providing a mechanism to use imported names to use for styling (akin to [my previous suggestion](https://github.com/w3c/csswg-drafts/issues/3714#issuecomment-490811668) on lexical names).

e.g. Consider this example that provides deep theming for syntax highlighting:

```css
/* styles.css */
@part $var-token {
  deep: true;
}
```

```js
/* code-/register.js */
import { var, keyword } from './styles.css';

/// ...
  for (const token of tokens) {
    if (token.type === 'var') {
      const varElement = createVarElement(token);
      varElement.parts.add(var);
    } else if (token.type === 'keyword') {
      const keywordElement = createKeywordElement(token);
      keywordElement.parts.add(keyword);
    }
    // ...
  }

/// ...
```

```html
<!doctype-html>

<style>
  @import "/components/code-/styles.css" {
    /* Import lexically scoped part name */
    $var;
    $keyword;
  };

  /* Syntax highlighting theme */

  /*
    * ::theme would be deep but only work on lexically exported part names
    * ::part would operate on local tree as per usual and doesn't pierce shadow roots
    */
  ::theme(var) {
    color: yellow;
  }

  ::theme(keyword) {
    color: green;
  }
</style>

<!-- This shadow root is loaded from the article file -->
<blog-post src="./how-to-program.html">
  <#shadow-root>
    Hello this is hello world!
    <code- lang="js">
      console.log("Hello world!");
    </code->
  </#shadow-root>
</blog-post>
```

-- 
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/864#issuecomment-579054593