Register custom element as web component


#1

I have an Aurelia custom element that I’m trying to render inside a web component template and use elsewhere in my application as a custom element.

I registered the custom element using ComponentRegistry which allows the custom element to render inside a web component. However the same custom element will no longer render as a custom element via compile and attach.

Here’s the stack trace that I’m getting:
Uncaught TypeError: Cannot read property ‘behaviorInstructions’ of undefined
at applyInstructions (index.js:21)
at ViewFactory.create (index.js:21)
at BoundViewFactory.create (index.js:21)
at Repeat.addView (index.js:21)
at ArrayRepeatStrategy._standardProcessInstanceChanged (index.js:21)
at ArrayRepeatStrategy.instanceChanged (index.js:21)
at Repeat.itemsChanged (index.js:21)
at Repeat.bind (index.js:21)
at Controller.bind (index.js:21)
at View.bind (index.js:21)
at Repeat.addView (index.js:21)
at ArrayRepeatStrategy._standardProcessInstanceChanged (index.js:21)
at ArrayRepeatStrategy.instanceChanged (index.js:21)
at Repeat.itemsChanged (index.js:21)
at BehaviorPropertyObserver.selfSubscriber (index.js:21)
at BehaviorPropertyObserver.call (index.js:21)

Any suggestions are appreciated?

Mark


#2

I was able to resolve the above issue by extending my custom element class and wrapping the custom element in an html file with ‘-wc’ suffix. I then registered the ‘-wc’ version as a web component.