Re: [w3c/webcomponents] How to define APIs only for custom element authors (#758)

Hell you all, I just want to reiterate that I feel passing options like `needsInternal` or default styles (re: https://github.com/w3c/webcomponents/issues/468) to `customElements.define` seems out of place because:

- authors define classes.
- authors can delegate the use of `customElements.define` to end users so that end users can name the elements as they wish.
  - it wouldn't make sense to require all end users to know the specifics of the class in order to pass those specifics into the `customElements.define` call.
  - This is what `class` is for! Let the author define the class specifics on the class, and let the end user use the element without worrying about the class specifics.

For this reason I think that mechanisms like `@decorators`, `static props`, and `Mixins()`. are better. **_The author can decide what APIs a class needs, what styles it has, what behaviors it has, etc._**

The end user just needs to define the element, and use it.

So in my opinion, authors of the custom elements should use `class` infrastructure to its fullest rather than putting parts of the class into `customElements.define` calls.

Author:

```js
import styled from 'lib1'
import withRender from 'lib2'
import html from 'lib3'
import attribute from 'lib5'
// or const {attribute} = CustomElements // builtin
const [One, Two, Three] = window.ElementFeatures // builtin

@styled({
  foo: {
    color: 'skyblue'
  }
})
class AwesomeElement extends withRender(HTMLElement) {
  static elementInternals = [One, Two, Three]
  static userAgentStyle = new window.CSSStyleSheet( ... )
  
  @attribute('material-color', Color)
  materialColor = new Color('red')

  render() {
    return html`<div class="${this.classes.foo}"></div>`
  }
}
```

End user:

```js
import AwesomeElement from 'awesome-element'
customElements.define('awesome-el', AwesomeElement)
document.body.innerHTML = `<awesome-el></awesome-el>`
```

But then again, the author could abstract it away.

Author:

```js
// adding onto the same file:
export const define = name => {
  customElements.define(name, AwesomeElement, {
    style: new window.CSSStyleSheet( ... ),
    elementInternals: [One, Two, Three]
  })
}
```

End user:

```js
import define from 'awesome-element'
define('awesome-el')
document.body.innerHTML = `<awesome-el></awesome-el>`
```

I guess abstracting works, but now its an extra step.

If I'm already using `class` to define my `class`, why not just use `class` to define everything about my `class`. 😃 

-- 
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/758#issuecomment-459860970