12

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);
        }
4
  • 1
    Can you provide the snippet as where are you trying to add the directive? – Jayant Das Mar 1 '19 at 21:45
  • So you are trying to add the directive to the someId div. I don't think you will be able to do so, as the directive can be only applied on non-empty elements and that this is not the case here. Just a thought here - Couldn't you just add another empty div within it and utilize that here? Because in any case you are still adding a child element. – Jayant Das Mar 1 '19 at 22:01
  • no, since the framework looks for that specific div to append the elements, the directive can be only applied on --> empty elements. Add the lwc:dom="manual" directive to an empty native HTML element =( – glls Mar 1 '19 at 22:05
  • 1
    Hmm, I see. Not sure if you really have options here. – Jayant Das Mar 1 '19 at 22:38
10

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 ...
  }
}
2
  • 1
    This works but what if I want to append more HTML to the innerHTML without wiping out the values a user has entered into the form of the current innerHTML? – Arthlete Mar 12 '20 at 20:43
  • I get Cannot add property innerHTML, object is not extensible when trying this approach, I've outlined my problem in this question – Robs Jun 17 '20 at 14:26

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.