Passing properties to a Custom Element in toDOM()

#1

I want to use a custom element (Web Component) in toDOM() within a plugin. To get this to work I need to pass properties into the custom element.

From what I can see and have tried, you can only specify attributes in the toDOM() DOMOutputSpec.

For example this is what I need to do in toDOM() - ['clibu-btn', { '.props': { custom element props... } ]

I am using Lit-element for the Web Components. LE templates are used for this, however I wasn’t able to get them to work in toDOM().

I have come up with a hacky work-around, but would prefer a cleaner solution.

#2

You can return a {dom, contentDOM} object holding actual DOM elements from toDOM, which might help here.

#3

@marijn Thanks, I’ll look into that and report back.

#4

For others who come across this post this is what I’ve done using Lit-Html and Lit-Element.

toDom( node ){
    const tmpl = html`<some-tag ....>...`    // template includes custom elements
    let docFrag = new DocumentFragment()
    render( tmpl, docFrag )
    return docFrag.firstElementChild
}

Thanks again @marijn for your quick and helpful reply and great editing library.