appendChild to non empty div in lightning web component

Question

I am using a thrid party library to render certain elements in a 'container', and as per the documentation on lwc directives, I understand that I have to add a directive to specificaly indicate that the dom can me targeted by appendChild, however, when I try to add the directive to a non-empty element and deploy it, I get the following error:

"error":"LWC1086: Invalid contents for element with \"lwc:dom\". Element must be empty"

I have other embeded elements that are also used by the frameowrk (to do the same)

If i do not add the directive, I run into this error:

Error: [LWC error]: appendChild is disallowed in Element unless lwc:dom="manual" directive is used in the template.

this seems counterproductive =/ and i'm assuming there is no workaround ? (or is there?)

Not sure this is helpful, but here is an example snippet:

<template>
    <div class="slds-m-around_medium">
        <div id="someId" class="myInterface" > <!--lwc:dom="manual" Wont work -->
            <div class="tab-section">
                <a class="A-Tab" data-id="All" data-caption="All Content" lwc:dom="manual"></a>
            </div>

            <div class="main-section">
              <div class="results-column">

                <div class="resultList" data-layout="list" lwc:dom="manual">
                </div>

                <div class="pager" lwc:dom="manual"></div>
                <div class="resultsPerPage" lwc:dom="manual"></div>
              </div>
            </div>
          </div>
    </div>

.js file

--in my default class class that extends the LightningElement--
    renderedCallback() {
        if (this.framewokrInitialized ) {
            return;
        }
        this.framewokrInitialized = true;
        // initialize component
        Promise.all([
            loadScript(this, ResourcesC + '/js/resource1.min.js'),
            loadStyle(this, ResourcesC + '/css/resource2.css'),
            loadScript(this, ResourcesC + '/js/resource3.js')



        ]).then(() => {
                this.initMethod();
            }).catch(error => {
                //do something
            });     
        }

        initMethod(){

            Framework.aClass.aMethod('args', 'more args')
            const root = this.template.querySelector(".myInterface"); 
            Framework.init(root);
        }

Answer 1

The lwc:dom="manual" directive indicates to the engine that it should not touch the child nodes of a specific element. Because of this, the LWC compiler will complain if you add children elements to this.

---

The only way to add children node to an element with lwc:dom="manual" directive is via javascript:

<template>
  <div class="container" lwc:dom="manual"></div>
</template>

import { LightningElement } from 'lwc';

// The content you want to insert in container
const CONTAINER_HTML = `<div>Some HTML</div>`;

export default class extends LightningElement {
  renderCallback() {
    const container = this.template.querySelector('.container');
    container.innerHTML = CONTAINER_HTML;
    // ... Do some logic with the container ...
  }
}

Answer 2

Additional Details :: How to dynamically add content upon button click without clearing/wiping-out the existing content. Used a simple ul/li html elements and a button to demonstrate the concept. Comments are left to add insights.

<template>
    <lightning-card title="upquotient.com Coaching specialities" icon-name="custom:custom14">
        <div class="slds-var-m-around_medium">
            <button class="btn slds-button slds-button_brand">Add upquotient.com Differentiators</button>
            <div class="slds-var-m-top_medium">
                <!-- Error: [LWC error]: The `appendChild` method is available only on elements 
                that use the `lwc:dom="manual"` directive. 
                Fix :: add the directive lwc:dom="manual" as below-->
                <!-- Add the lwc:dom="manual" directive to an empty native HTML element. The owner of the 
                component calls appendChild() on that element to manually add the element -->
                <ul class="lstspecialities" lwc:dom="manual"></ul>
            </div>
        </div>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class StkExchangeProblem extends LightningElement {

    ulEle = null
    renderedCallbackInvoked = false
    differentiators = ['Holistic coaching', 'Multiple MICRO Projects', 'Plethora of Workshops']

    renderedCallback(){
        if(!this.renderedCallbackInvoked){
            this.renderedCallbackInvoked = false
            this.ulEle = this.template.querySelector('.lstspecialities')
            this.template.querySelector('.btn').addEventListener('click', ()=>{
                this.manipulateLst()
            })
        }
    }

    manipulateLst(){
        let liEle = document.createElement('li')
        liEle.innerHTML = this.differentiators[ Math.floor(Math.random()*this.differentiators.length) ]
        this.ulEle.appendChild(liEle)
    }
}