Using Shadow DOM with View Factory

Help Requests
3

Here’s an example: https://codesandbox.io/s/shadow-dom-html-only-dynamic-template-jqgdw

If you want to create views from a view factory and add to an element, you need to create the view slot with the right signal, something like this:

const viewSlot = new ViewSlot(hostElement, /* append instead of insert */ true)

Now because you want the style not to leak out, so the host element needs to be inside a shadow root, or a shadow root itself, so you should do:

const viewSlotHost = hostElement.attachShadow({ mode: 'open' });
const viewSlot = new ViewSlot(viewSlotHost, true);

And then you can do:

const viewFactory = viewCompiler.compile('<template>Some html with binding syntax</template>');
const view = viewFactory.create();

view.bind(bindingContext, overrideContext);
viewSlot.add(view);

Example: https://codesandbox.io/s/shadow-dom-html-only-dynamic-template-jqgdw

1 Like