Struggling with duplicate lit-html

[tpluscode]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

I'm trying to create a sandbox for my custom elements based on lit-element/lit-html. When running they don't render correctly, but in a ways which typically indicates duplicate resolution of lit-html.

I found similar report #1257 but inspecting the manager did not reveal any duplication. At least I did not notice it.

To Reproduce

Check my sandbox linked below.

There are 3 lines to notice in index.js

import "@hydrofoil/shaperone-wc/ShaperoneForm";
import * as MaterialRenderStrategy from "@hydrofoil/shaperone-wc-material/renderer";
import * as vaadinComponents from "@hydrofoil/shaperone-wc-vaadin/components";

Comment out the latter two and the core element renders. As soon as either @hydrofoil/shaperone-wc-material or @hydrofoil/shaperone-wc-vaadin is imported, the page breaks.

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox	dunno
Browser	Safari, Chrome, no matter
Operating System	Mac OS

[sannek]

Thanks for your report - We'll have a look to see what is going on and get back to you.

[SaraVieira]

Hey!

Sorry, I do not have a lot of experience with Web Components,

Can you please tell me what I am supposed to see in this sandbox: https://codesandbox.io/s/quizzical-buck-edtcx

I tried deleting the lines you mentioned but get the same thing :/

[tpluscode]

Sorry @SaraVieira, I think the description was not accurate. Change the code as shown below and a plain form with a single field will appear

import "@hydrofoil/shaperone-wc/ShaperoneForm";
// import { renderer, components } from "@hydrofoil/shaperone-wc/configure";
// import * as MaterialRenderStrategy from "@hydrofoil/shaperone-wc-material/renderer";
// import * as vaadinComponents from "@hydrofoil/shaperone-wc-vaadin/components";
import { dataset } from "@rdf-esm/dataset";
import clownface from "clownface";
import { NodeShapeMixin } from "@rdfine/shacl";
import { ShapeBundle } from "@rdfine/shacl/bundles";
import { schema } from "@tpluscode/rdf-ns-builders";
import RdfResource from "@tpluscode/rdfine";

RdfResource.factory.addMixin(...ShapeBundle);

// renderer.setStrategy(MaterialRenderStrategy);
// components.pushComponents(vaadinComponents);

const resource = clownface({ dataset: dataset() }).blankNode();
const shape = new NodeShapeMixin.Class(
  clownface({ dataset: dataset() }).blankNode(),
  {
    property: [
      {
        path: schema.name,
        name: "Name",
        minCount: 1
      }
    ]
  }
);
console.log(resource);
const form = document.querySelector("shaperone-form");
form.shapes = shape.pointer;
form.resource = resource;

[SaraVieira]

Thank you!

I think I figured out what the underlying error is: https://codesandbox.io/s/quizzical-buck-edtcx?file=/index.js

Will take a look with @CompuIves tomorrow

Thank you for your help

[tpluscode]

Any updates @SaraVieira ?

[CompuIves]

I've committed a fix, will test it some more before merging!