Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reef and Web Components

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

cferdinandicommented, Jul 14, 2022

As of v12 (now live), Reef supports web components out of the box:

snx888commented, Mar 17, 2022

@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.


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


customElements.define('x-btn', class extends HTMLElement {
    constructor() {
        this.attachShadow({mode: 'open'})
        this._reef = new Reef(this.shadowRoot, {
            data: {
                count: 0
            template: data => `
                    span { color: gray; }
    connectedCallback() {
        this.shadowRoot.querySelector("button").addEventListener("click", (e) => {
    reset() { = 0
Read more comments on GitHub >

github_iconTop Results From Across the Web

Advanced Techniques - Reef
Reef is a set of small functions you can mix-and-match as needed. As your project gets bigger, the way you manage components and...
Read more >
cferdinandi/reef: A lightweight library for creating reactive, ...
A lightweight library for creating reactive, state-based components and UI. ... Reef is a simpler alternative to React, Vue, and other UI libraries....
Read more >
Chapter 5. Instrumenting a better web app through modules
This chapter covers. ES2015 modules as an alternative to <script> tags in your HTML; Creating self-reliant Web Components; Using a Web Component ......
Read more >
Web Components - MDN Web Docs - Mozilla
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated ...
Read more >
Pacific ciguatoxins in food web components of coral reef ...
Ciguatera fish poisoning (CFP) is a foodborne illness caused by consumption of coral reef fishes contaminated by ciguatoxins (CTXs); ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found