6

In Aura there was a way to extend component and it's template. Extending component's template would go into {!v.body} slot from the parent component.

In LWC we can nicely extend components code by using Class extends but I can't find a way to either merge templates or set parent's component slot dynamically in child's code. Imported template seems to be a function so it is hard to do anything with it without a documentation. Is there some documentation that I missed or are there any other solutions to this?

GenericModal:

/* genericModal.js */
import { LightningElement } from 'lwc';
import template from './genericModal.html';

export default class GenericModal extends LightningElement {
  get baseTemplate() {
    return template;
  }
}

/* genericModal.html */
<template>
  <div>generic component<slot></slot>generic component</div>
</template>

ExtensionModal:

/* extensionModal.js */
import GenericModal from 'c/genericModal';
import template from './extensionModal.html';

export default class ExtensionModal extends GenericModal {

  render() {
    // how to use merge this.baseTemplate with template or to insert it into <slot></slot>?
    return this.baseTemplate;
  }
}

/* extensionModal.html */
<template>
  <div>child component body</div>
</template>
1

I don`t think that it is possible (at least for platform lwc) - you can assume if something is basically not documented at all you are not intended to use it. You would also come potentially quickly to "problems" like markup with child components which would mean that you would need to be able to instantiate them dynamically - something which is prohibited by the framework on platform etc.

The Template function comes most likely from their template-compiler package which is not available for import. As the template will most likely also contain references to data alternatives like inserting template directly would also not really work i guess.

Have the feeling that the that one place where the custom hook is described was just overseen and / or will be potentially be available for use later / for standalone lwcs.

For now i believe your plan is not implementable with platform lwcs and you should just use slots as intended (potentially with conditional rendering if you need specific markup for different conditions)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.