Re: [w3c/webcomponents] Support Custom Pseudo-elements (#300)

@andyearnshaw

> A component author, therefore, wouldn't modify the class attribute of the custom element hosting its shadow tree.

Hrn, you’re right. Either way, my point is: I really dislike the `::part()` syntax. I think a different token could be used to represent custom pseudo-elements.

----------

But does anyone disagree with what I said about custom pseudo-elements?

> Effectively, what I’m saying is that I prefer custom pseudo-elements to [@tabatkins’] suggestion because it is closer to what is done by user-agents to regular elements.

----------

Addressing https://github.com/w3c/webcomponents/issues/300#issuecomment-143880372: 

(1) Are shadow-pseudos more like classes or IDs?

I think they should act exactly like ids.

invalid:
```HTML
<div pseudo="foo bar"></div>
```

invalid:
```HTML
<div pseudo="foo"></div>
<div pseudo="foo"></div>
```

(2) How do we handle both a parent and child exposing themselves as pseudo-elements?

```HTML
<div pseudo="foo">
 <div pseudo="bar"></div>
</div>
```

```CSS
/* matches nothing */
x-baz::foo > div
{}

/* matches nothing */
div > x-baz::bar
{}

/* matches nothing */
x-bar::foo::bar
{}

/* matches <div pseudo="bar"> */
x-baz::foo > x-baz::bar
{}
```

(3) If a component contains other components, and wants to expose some of its sub-components parts as pseudo-elements, how does it surface them?

You can access them by nesting `::`. The following would show a “`Hello, world!`” button.

```HTML
<!doctype html>
<html>
 <head>
  <style>
   x-foo::bar::baz::before
   {
    content: "Hello, world!";
   }
  </style>
 </head>
 <body>
  <x-foo>
   #shadow
    <x-bar pseudo="bar">
     #shadow
      <button pseudo="baz"></button>
     /#shadow
    </x-bar>
   /#shadow
  </x-foo>
 </body>
</html>
```


---
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/300#issuecomment-225209712

Received on Friday, 10 June 2016 15:12:23 UTC