Using ViewSlot causing an error

Help Requests
1

Hello guys,
what I’m trying is

import { ViewSlot } from 'aurelia-framework';

export class ContextMenuRenderer {
  visible = false;
  items = [];
  viewSlot = null;

  constructor() {
  }

  render() {
    const container = document.createElement('div');
    container.className = 'context-menu-container';
    const slot = document
    document.body.appendChild(container);
    this.contextMenu = document.createElement('context-menu');
    this.contextMenu.setAttribute('visible.bind', 'visible');
    this.contextMenu.setAttribute('items.bind', 'items');
    this.viewSlot = new ViewSlot(container, true);
    
    this.viewSlot.add(this.contextMenu);
  }
}

What I’m doing wrong here as in the console I’m getting

aurelia-templating.js:1361 Uncaught (in promise) TypeError: view.appendNodesTo is not a function
    at push.960.ViewSlot.add (aurelia-templating.js:1361:1)
    at ContextMenuRenderer.render (context-menu-renderer.js:23:1)
    at App.attached (app.js:13:1)
    at push.960.Controller.attached (aurelia-templating.js:2888:1)
    at push.960.View.attached (aurelia-templating.js:1204:1)
    at push.960.ViewSlot.attached (aurelia-templating.js:1516:1)
    at aurelia-framework.js:393:1
2

ViewSlot can only add View, or ViewSlot instances. You are trying to add an element hence the error.

1 Like