developit / developit/element-worklet

What if the custom element author wishes for the end user to define the element name?

Aperta
#1 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
Nessun dato sulla lingua
Stelle
31
Fork
0
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

A pattern seen in some custom element libraries is that they allow the end user to import the class, and for the end user to decide with which name to call `customElements.define()`.

For example, an end user can do this:

```js
import {NiceElement} from 'some-library'

// End user chooses the tag name:
customElements.define('cool-element', NiceElement)

const el = document.createElement('cool-element')
```

Maybe we should allow this pattern to still be possible with Element Worklets.

For that to be possible, maybe the worklet can call `customElements.define` like the proposal already shows, but maybe also the end user can call it if the worklet doesn't. The alternative form might look like this:

```ts
// nice-element.js

// Use a default export to denote the class for the ElementWorklet perhaps:
export default class NiceElement extends WorkletElement {...}
```

Then the end user can register the element:

```js
// end-user.js
customElements.defineWorklet('cool-element', 'path/to/nice-element.js')

const el = document.createElement('cool-element')
```

Or maybe we can rely on the [stage 3 import assertions proposal](https://github.com/tc39/proposal-import-assertions) (I feel like the "import assertions" naming is strange). It could look like this:

```ts
// nice-element.js
// This is not a default export (the author can use any type of export):
export class NiceElement extends WorkletElement {...}
```

```js
// end-user.js
import {NiceElement} from 'path/to/nice-element.js' assert { type: "element-worklet" }

// customElements.define would automatically know how to handle WorkletElement proxy classes:
customElements.define('cool-element', NiceElement)

const el = document.createElement('cool-element')
```

`assert` doesn't quite match the semantic though. It seems that `assert` is for asserting mime types, but the worklet would have the same mime type as any other JSON file. So maybe some other sort of "import attribute" would be needed in a follow on like that proposal mentions:

```js
import {NiceElement} from 'path/to/nice-element.js' with { elementWorklet: true }
```

or something?

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Start by reviewing the proposed customElements.define(), defineWorklet(), and import-assertion examples in the issue. Compare the alternatives for allowing end users to choose an element name, then determine which registration behavior the project should support. Done means the supported API and its constraints are agreed and documented.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.