[csswg-drafts] [css-shadow-parts] Web Component default *exportparts=* (#3508)

frivoal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shadow-parts] Web Component default *exportparts=* ==
(Split from issue #3467, reported by @stefsullrew)

When building a custom web component via composition not having to explicitly specify `exportparts=` would improve the experience.

The example below presents a possible solution where, at component creation, `exportparts=` is defined.

```
class BarElement extends HTMLElement {
  constructor() {
    super();
    
    const shadowRoot = this.attachShadow({mode: 'closed'});
    
    shadowRoot.innerHTML = `
        <h1 part="header">Headline</h1>
        <p part="metadata">Posted on: 2019-01-10</p>
        <div part="content">...</div>
    `;

    if (!this.hasAttribute('exportparts'))
        this.setAttribute('exportparts', 'header, metadata, content');
  }
}

customElements.define('bar-element', BarElement);
```

```
<x-foo>
    <!-- iteration of bar-elements -->
    <!-- since no manual "exportparts=" was specified on each instance
         the defaults are exported -->
    <bar-element></bar-element>
    <bar-element></bar-element>
    ...
</x-foot>
```

```
x-foo::part(header) {
    color: green;
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3508 using your GitHub account

Received on Monday, 14 January 2019 02:59:46 UTC