@@ -355,87 +355,6 @@ createEffect(() => {
355
355
} )
356
356
```
357
357
358
- ## `DefaultBehaviors` (in LUME)
359
-
360
- [LUME](https://lume.io) (a 3D HTML toolkit) uses Element Behaviors, and provides an
361
- additional
362
- [`DefaultBehaviors`](https://github.com/lume/lume/blob/v0.3.0-alpha.14/src/behaviors/DefaultBehaviors.ts)
363
- mixin class that gives Custom Element classes the ability to define which
364
- behaviors they ship with by
365
- default, which is super handy!
366
-
367
- > **Note** Thinking to move DefaultBehaviors to here instead of `lume`.
368
-
369
- To use it first install `lume`:
370
-
371
- ```sh
372
- npm install lume
373
- ```
374
-
375
- To define a Custom Element with default behaviors, it is done similarly to with `observedAttributes`:
376
-
377
- ```js
378
- import { DefaultBehaviors } from 'lume/dist/behaviors/DefaultBehaviors.js'
379
-
380
- class SomeElement extends DefaultBehaviors(HTMLElement) {
381
- // Define observed attributes
382
- static get observedAttributes () {
383
- return [' some-attribute' , ' other-attribute' ]
384
- }
385
-
386
- // Define default behaviors that the element will have
387
- static get defaultBehaviors() {
388
- return [' some-behavior' , ' click-logger' ]
389
- }
390
- }
391
- ```
392
-
393
- Additionally, the `static defaultBehaviors` property can return an object whose
394
- key names are behavior names, and whose values are functions that return `true` or
395
- `false` to determine if a default behavior should be initially added to an
396
- element or not. The function will receive the element, as well as intial
397
- behaviors that the element already has defined by the `has=""` attribute when
398
- the element is created.
399
-
400
- For example, suppose we have the following HTML:
401
-
402
- < ! -- prettier - ignore -- >
403
- ` ` ` html
404
- <my-el has="another-behavior"></my-el>
405
- <my-el has="some-behavior"></my-el>
406
- ` ` `
407
-
408
- We define a Custom Element like :
409
-
410
- ` ` ` js
411
- class MyEl extends DefaultBehaviors(HTMLElement) {
412
- static get defaultBehaviors() {
413
- return {
414
- 'click-logger': (element, initialBehaviors) => {
415
- // For sake of example, suppose that if the element has
416
- // ` another - behavior ` , then we do not want it to have the ` click - logger `
417
- // behavior:
418
- if (initialBehaviors.includes('another-behavior')) {
419
- return false
420
- }
421
- return true
422
- },
423
- }
424
- }
425
- }
426
-
427
- customElements.define('my-el', MyEl)
428
- ` ` `
429
-
430
- When the ` my-el ` elements are created , only the one without the ` another-behavior ` will have
431
- ` click-logger ` added to it, so the resulting DOM will be as follows:
432
-
433
- < ! -- prettier - ignore -- >
434
- ` ` ` html
435
- <my-el has="another-behavior"></my-el>
436
- <my-el has="some-behavior click-logger"></my-el>
437
- ` ` `
438
-
439
358
# Contributing
440
359
441
360
First install dependencies:
0 commit comments