Re: [w3c/webcomponents] Provide a lightweight mechanism to add styles to a custom element (#468)

Update from Google.

We are interested in "modifications to the fake shadow root approach to require simple (+ compound) selectors". That can be considered as "the best of the both worlds" (simple selector approach + shadow dom cascading order), we believe.

That meanas:

1. We allow only simle (+ compound) selector in the custom element default style. We don't allow any arbitary selector. e.g. "a > b"
2. Rule's scope is limited to the custom element itself. Its scope is not a fake shadow root tree, nor a real shadow root tree. That means rules never match an element in a real shadow root, which can be attached to a custom element later.
3. We borrow an existing cascading order, Shadow DOM cascading order, as the cascading order of the custom element default style here so that we can avoid introducing new cascading order.
    We might want to call it "fake shadow dom cascading order";  Its cascading order is defined as if the custom element default style was defined at the first position of its *pseudo* shadow root.
4. As we introduced ":host" pseudo-class, we might want to introduce new pseudo class ":element" (tentative name) here. Unless ":element" is specified, a rule never match the custom element.
   e.g.

   The followings can match the custom element:
   ```css
   :element {
     color: red,
   }
   :element(.foo) {   /* Exact syntax can be defined later. I borrow :host pseudo class's convention here. */
     color: red,
   }
   ```

   The followings never match the custom element nor any elements:
   ```css
   /* "*" universal selector does NOT match to the custom element. ":element" is required. */
   * {
     color: red
   }
   /* This doesn't match the custom element's child. Complex selector doesn't make sense here because the rules' scope is only the custom element itself. */
   :element > foo {
     color: red
   }
   ```


The rationales are:

- We don't need the full concept of "a shadow root" here. What we need here is just its cascading order definition.
- If rule's scope would be extended to its "fake shadow root" or "real shadow root",  our CSS engine should look up all rules defined in custom element default style when executing selector matching for an element in a real shadow root. That is unnecessary burden for our CSS engine, sooner or later, which we don't want.

-- 
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/468#issuecomment-400905342