Custom Element not working

[ghost]

1. ember new DisplayTile -b @glimmer/blueprint --web-component=display-table
2. ember b --prodcution
3. < DisplayTile> < /DisplayTile> --> nothing happens
4. < display-title> < /display-title> --> DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[ajgribble]

I had the same issue with glimmer/[email protected] (but not 0.8.0). I haven't had a chance to chase down the underlying issue but changing the 'whenRendered' function in initialize-custom-elements.js with the following fixes the issue:

function whenRendered(app, callback) {
  // if (app['_rendering']) {
  if (!app['_rendered']) {
    requestAnimationFrame(() => {
      whenRendered(app, callback);
    });
  } else {
    callback();
  }
}

[rbrcurtis]

I just put up a PR to fix this: #29 (the exception, not the docuementation)

[mrosenberg]

The rendering engine changed from sync to async. Edit your main.ts.

app.boot();
initializeCustomElements(app, {'foo-bar': 'FooBar'});

to

app.boot()
.then(() => {
  initializeCustomElements(app, {'foo-bar': 'FooBar'});
});

That should fix your web component.