Lit-html: accessing resulting dom after lit render(...) not working anymore

[fopsdev]

Hi there

I had a custom element running which was using:

const template = html`<hello-world id="myID${this.obj.id}"></hello-world>`
render(this, template)
const ref = document.getElementById("myID" + this.obj.id)

it was working with latest release 0.11.1 but not anymore with current master
ref is now null so it looks like render changed somehow (maybe render is now async?, just wild guessing)

[fopsdev]

so i'm doing now a this.getElementByTag("xyz") to get the ref.
This works because i'm still in the custom element context.
still strange though that it worked before

[fopsdev]

btw. i'm doing this because i'm using libs like chartJs which need to access a canvas and a draw on it.
so i'm basically first render the "dummy" canvas using lit and then i'm getting a ref on it to manipulate and add properties on it.
i somehow feel i should use directives for that...

[justinfagnani]

Huh, nothing like this should have broken recently. Can you get a repro up an running online I can look at?

Separately, for your use case you might want to create the node ahead of time and pass it to lit-html:

const chartNode = document.createElement('div');
chartJs.doThing(chartNode);
html`${chartNode}`

[fopsdev]

Ok, thanks for the tip. I'll try to get a repro out

[fopsdev]

ok some news:
first the good one :) -> i couldn't reproduce the error anymore
then the bad one:

  getUI(state, html) {
    let input = document.createElement("input")
    input.className ="awesomplete"
    input.value = state.E[this.obj.id].value
    this.awe = new Awesomplete(input, {
      autoFirst: true,
      list: [
        { label: "Belarus", value: "BY" },
        { label: "Belgium", value: "BE" },
        { label: "China", value: "CN" },
        { label: "United States", value: "US" }
      ],
      replace: (suggestion) => {
        this.actions.selChanged({ obj: state.E[this.obj.id], suggestionLabel: suggestion.label, suggestionKey: suggestion.value })
      },
    })
    return html`${input}`
  }

doesn't work. it gives me:

node_modules\lit-html\lib\parts.js:392 Uncaught TypeError: Cannot read property 'insertBefore' of null
    at Function.$.create (node_modules\lit-html\lib\parts.js:392)
    at _.CONTAINER [as container] (node_modules\lit-html\lib\parts.js:392)
    at new _ (node_modules\lit-html\lib\parts.js:392)
    at HTMLElement.getUI (src\components\RowE.js:14)
    at HTMLElement.render (node_modules\lit-html\lib\parts.js:333)
    at HTMLElement.init (node_modules\lit-html\lib\parts.js:392)
    at HTMLElement.set obj [as obj] (node_modules\lit-html\lib\parts.js:320)
    at PropertyCommitter.commit (node_modules\lit-html\lib\part.js:6)
    at PropertyPart.commit (node_modules\lit-html\lib\dom.js:30)
    at TemplateInstance.update (src.449003b7.js:439)

but since i can use afterRender, this is not a huge problem. but maybe it gives you a hint.

[fopsdev]

oh, ok its becaue this awesomplete lib requires the input to be inside a parent.
so now i'm doing:

 let div = document.createElement("div")
    let input = document.createElement("input")
    div.appendChild(input)
...
...

and now its working :)

[aadamsx]

@fopsdev do you mind putting something out on codepen or jsbin or anything in order to help others in the community see how your doing interactions with chartsjs and the like? There is sparse info on the webs (blog posts and the like) about how do to things like this, so quick examples are all we have at the moment.

[fopsdev]

Yeah @aadamsx thats a good idea. Currently in discovery mode. As soon as i have some work finished i can post a sample here