https://github.com/bahrus/sceadu-fax
https://github.com/bahrus/sceadu-fax
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bahrus/sceadu-fax
- Owner: bahrus
- License: mit
- Created: 2021-03-17T01:02:19.000Z (over 4 years ago)
- Default Branch: baseline
- Last Pushed: 2021-05-30T13:45:12.000Z (about 4 years ago)
- Last Synced: 2025-02-01T01:07:01.761Z (5 months ago)
- Language: TypeScript
- Size: 162 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sceadu-fæx
## Shadow DOM Facsimile
There's a [promising](https://github.com/WICG/webcomponents/issues/909) proposal that recognizes that the slot mechanism ShadowDOM provides is useful even outside the confines of style encapsulation.
sceadu-fæx (or alternatively shadow-fax) is a web component that provides limited support for slotting without using native ShadowDOM -- sticking to light children. It also does it outside the confines of a traditional web component, where the ShadowDOM is kinda/sorta nested in a kind of parent/child relationship. So this implementation is definitely not a drop-in "ShadowDOM slotting without ShadowDOM" replacement, as there are significant differences in behavior.
sceadu-fæx extends [xtal-fragment](https://github.com/bahrus/xtal-fragment), and thus inherits its basic syntax. xtal-fragment lacks ShadowDOM-lite slotting emulation, which is the value-add proposition sceadu-fæx provides.
Perhaps it is best to describe what sceadu-fæx does with an example:
```html
My {{nameOfCategory}}
```
generates:
```html
...
My First Category
```
As we can see, sceadu-fæx works best in conjunction with web components [slot-nik](https://github.com/bahrus/slot-nik), which emulates slots, and [ref-to](https://github.com/bahrus/ref-to), which creates references to live slotted elements (based on the a attribute).
**NB:** This component might not play well with other rendering libraries. For a rendering library to be compatible with this component, it must use the following API:
1. If the contents "grouped" by sceadu-fæx need to be moved to a new location in the DOM tree, this should be done via newDestination.appendChild($0.extractContents()) where $0 is the instance of sceadu-fæx.
2. The rendering library may need to skip over the owned siblings when updating the DOM, via $0.nextUngroupedSibling, where $0 is the instance of sceadu-fæx (unless the renderer is aware of the contents of the template sceadu-fæx is copying from).
## What happens when the light children change?
1. If ref-to is removed, the element it created is removed.
2. If a ref-to element is added with a slot-nik attribute, it is appended to the grouped sibling managed for that slot.
3. Changes to the actual element must be done via refToElement.deref, if it exists.