Aurelia Webcomponent failed to render for composite custom-element

Help Requests
1

I’m using Aurelia and aurelia-web-components plugin to provide reusable webcomponents compliant custom-elements. I’d like to have aurelia custom-element forward compatible with webcomponents - so to have with same name or prefix. Recently, I don’t know if I’m doing something wrong or I discovered a possible bug which prevents composite webcomponents to be rendered.

My composite component <bdl-beakercontrol> template uses <bdl-range> and <bdl-beaker>. All these are registered as webcomponents too - using same name (with bdl- prefix). Browser don’t show <bdl-beakercontrol> and throws error:

Uncaught TypeError: instruction is undefined
    applyInstructions aurelia-templating.js:2211
    create aurelia-templating.js:2471
    create aurelia-templating.js:4108
    auInit aurelia-web-components.js:46
    attributeChangedCallback aurelia-web-components.js:66
    registerBehavior aurelia-web-components.js:178
    useGlobalElements aurelia-web-components.js:164
    useGlobalElements aurelia-web-components.js:162
    configure webcomponents.js:31

while the simple components <bdl-range> and <bdl-beaker> are rendered correctly - as they are not composed from other aurelia components.
A workaround seems to have different component name in aurelia and use fallback prefix in webcomponents plugin. But I’d rather have webcomponent names or prefix same as aurelia components.

Quick repo to reproduce this problem is at https://github.com/TomasKulhanek/bodylight-aurelia-webcomponent-bug.git
To live preview this problem https://tomaskulhanek.github.io/bodylight-aurelia-webcomponent-bug/dist/

1 Like
2

I’m not sure what’s going on yet, but I’ve spotted a potential issue:

  • conflicting declaration, in beaker-controls, you’ve got:
      <require from="./bdl-range.html"></require>
  <require from="./bdl-beaker.html"></require>
    And in webcomponents.js, you define those as global elements again. Maybe remove in one place first?
1 Like
3

Thanks for looking at this problem.

  • I removed local declaration frombdl-beakercontrols but it doesn’t solve the issue - same error is thrown in JS console and nothing is rendered for this component.
  • I removed global declaration of bdl-rangeand bdl-beaker from webcomponents.js and it solved the problem, however, I don’t have now bdl-rangeand bdl-beakeravailable as global components for other apps.
1 Like
4

I think the reason that you got the error is because while compiling with global bdl range, it registers a global custom element that will be remoced later by our custom element registry call. If you dont need it available globally, just register those elements directly with the registry, so there wont be any issues. You can refer to the doc with how to register them directly.