appendChild to non empty div in lightning web component

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

<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 ...
  }
}

Attribution
Source : Link , Question Author : glls , Answer Author : pmdartus