SolidJS•2y ago

Problem creating web component with solid-element

Hi, I'm trying to create an image carousel web component by wrapping an existing JS library (called Glide) within a Solid component. As a regular solid component it works fine, but when I try to convert it to a web component I get an error from the Glide saying indicating that it cannot find the root element on which to mount the image carousel. It seems the initialization which I place within the onMount hook cannot access the elements of the shadow DOM (???) The code is below. Any insights would be appreciated.

import {Component, createEffect, createSignal, JSX, onMount} from "solid-js"
import Glide from "@glidejs/glide"
import {customElement} from "solid-element";


const VehicleGallery: Component = () => {

    onMount(() => {
        const glide = new Glide('.glide', {

              // GLIDE OPTIONS
        })
        glide.mount() // THROWS ERROR: "Root element must be a existing Html node"
    })

    return (
        <>
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css" />
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css" />

            <div id="vehicle-gallery">
                <div class="glide">
                    <div class="glide__track" data-glide-el="track">
                        <ul class="glide__slides">
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/000000/fff.png"/>
                            </li>
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/FF0000/fff.png"/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </>
    )
}

customElement('vehicle-gallery', {id: undefined}, (props, { element }) => {
    return <VehicleGallery id={props.id} />
})

import {Component, createEffect, createSignal, JSX, onMount} from "solid-js"
import Glide from "@glidejs/glide"
import {customElement} from "solid-element";


const VehicleGallery: Component = () => {

    onMount(() => {
        const glide = new Glide('.glide', {

              // GLIDE OPTIONS
        })
        glide.mount() // THROWS ERROR: "Root element must be a existing Html node"
    })

    return (
        <>
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css" />
            <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css" />

            <div id="vehicle-gallery">
                <div class="glide">
                    <div class="glide__track" data-glide-el="track">
                        <ul class="glide__slides">
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/000000/fff.png"/>
                            </li>
                            <li class="glide__slide">
                                <img src="https://dummyimage.com/1200x800/FF0000/fff.png"/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </>
    )
}

customElement('vehicle-gallery', {id: undefined}, (props, { element }) => {
    return <VehicleGallery id={props.id} />
})

1 Reply

eponymousOP•2y ago

I solved this by using a ref (https://www.solidjs.com/tutorial/bindings_refs) instead of passing the class name to the Glide constructor. So... new Glide('.glide', ...) becomes new Glide(glideRef, ...) and <div class="glide"> becomes <div ref={glideRef} class="glide">

Gaming

Programming

Problem creating web component with solid-element