Reef and Web Components

I am relatively new to, or some might say “late to the game”, when it comes to reactive, state-based UIs. I have been working on a project where we are looking to use web components as progressive enhancements and be able to render the page accordingly. I decided to take a look at ReefJS as I didn’t want to start with a large library like React or Vue. First off let me say, wow this is a great package. I was able to learn what I needed and am happy with the results.

The question I have is this, if I use a custom element as the target for the Reef rendering, it seems like it just treats that element like a <div/>. My assumption, which is probably wrong, was that the contents of the template would be attached via the shadow root like when using vanilla JavaScript to add a web component. Is there any way to have a custom element as the target so the contents are rendered in an encapsulated way or is this beyond the scope of Reef? My goal is to deliver these components with their own styles and scripting without interference with the rest of the page.

[cferdinandi]

As of v12 (now live), Reef supports web components out of the box: https://reefjs.com/advanced/#native-web-components

[snx888]

@influxweb unless it would be quiet nice to enable reef to support webcomponents from scratch, i’m using reef within the webcomponent. So I got the benefits from both worlds; Encapsulated styling and child components using shadow DOM and the great DOM diff functionality and built in proxy-reactivity provided by reef. The downside of the webcomponent approach in my opinion is that we’re not able to provide data using the constructor. We have to create at set method, stick to attributes or just declare the data inside the component like in my example.

index.html

...
<script src="../reef.min.js"></script>
...
<x-btn>Click counter</x-btn>
...
<script type="module">
    import './XBtn'
    document.onclick = () => {
      document.querySelector("x-btn").reset()
    }
</script>
...

XBtn.js

customElements.define('x-btn', class extends HTMLElement {
    _reef
    constructor() {
        super()
        this.attachShadow({mode: 'open'})
        this._reef = new Reef(this.shadowRoot, {
            data: {
                count: 0
            },
            template: data => `
                <style>
                    span { color: gray; }
                </style>
                <button>
                    <slot></slot>
                    <span>(${data.count})</span>
                </button>
            `
        })
    }
    connectedCallback() {
        this._reef.render()
        this.shadowRoot.querySelector("button").addEventListener("click", (e) => {
            this._reef.data.count++
            e.stopPropagation()
        })
    }
    reset() {
        this._reef.data.count = 0
    }
})