div innerHTML with standard lightning web componentsNot able to render dynamic Lightning Web ComponentWhat are Lightning Web ComponentsTarget inner elements of standard Lightning Web Components with CSSDocument.fullScreen API implementation in Lightning Web Components(LWC)Using third-party Web Components with Lightning Web ComponentsLightning Web Component not loading while using Lightning-Input with Wrapper class variableoverride standard action with Lightning Web ComponentLightning Web Components with Express.jsDynamic Content in Lightning Web Components

How does the bypass air provide thrust?

Why do we need full-fledged workstations running massive OSes with massive software?

Magic Weapon Critical Hit Houserule

Could a robot that can survive at the center of the Earth also survive a nuclear explosion?

Is Kirk’s comment about “LDS” intended to be a religious joke?

Six letter words from "MONSTER"

Eating Titan's oceans

Pass on your radiation

How to permanently set refresh interval for top command?

Can a public school in the USA force a 14yr old to create a Twitter account for a passing grade?

How to I represent 5 eighth-notes as one note?

Which was the first story to feature force fields?

Planet where giant manned machines travel in convoy across surface, tracking some astronomical phenomenon

How to optimise the use of 10 nuclear fuel pellets in medieval period?

How to get a bowl with one liter of water

How to view register contents on the PDP-11 console?

Is there a difference between 回转 and 掉头?

"Sack" data structure in C#

What license do I use when I don't want stock image companies charging people money for photos?

Anvil or by-pass pruner?

wlan0 not created when using Ubuntu 19.10 netboot (HP Notebook 14-cf1599sa with Intel Wireless-AC 9461)

Advent calendar

Could a German insult Hitler without being arrested?

Could the barycenter orbit of our sun be greatly underestimated?



div innerHTML with standard lightning web components


Not able to render dynamic Lightning Web ComponentWhat are Lightning Web ComponentsTarget inner elements of standard Lightning Web Components with CSSDocument.fullScreen API implementation in Lightning Web Components(LWC)Using third-party Web Components with Lightning Web ComponentsLightning Web Component not loading while using Lightning-Input with Wrapper class variableoverride standard action with Lightning Web ComponentLightning Web Components with Express.jsDynamic Content in Lightning Web Components






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;









2


















I'm trying to display a custom format for my lightning web component via rendered and innerHTML of a div.



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


js (data has @track):



renderedCallback() 
if(this.data)
const container = this.template.querySelector('.container');
container.innerHTML = '<lightning-input name="test" value="' + this.data.societyID + '"></lightning-input>';




But it's giving me no errors but also not displaying anything on my div. Is innerHTML only available for native HTML or is there a better way to achieve this?










share|improve this question































    2


















    I'm trying to display a custom format for my lightning web component via rendered and innerHTML of a div.



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


    js (data has @track):



    renderedCallback() 
    if(this.data)
    const container = this.template.querySelector('.container');
    container.innerHTML = '<lightning-input name="test" value="' + this.data.societyID + '"></lightning-input>';




    But it's giving me no errors but also not displaying anything on my div. Is innerHTML only available for native HTML or is there a better way to achieve this?










    share|improve this question



























      2













      2









      2








      I'm trying to display a custom format for my lightning web component via rendered and innerHTML of a div.



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


      js (data has @track):



      renderedCallback() 
      if(this.data)
      const container = this.template.querySelector('.container');
      container.innerHTML = '<lightning-input name="test" value="' + this.data.societyID + '"></lightning-input>';




      But it's giving me no errors but also not displaying anything on my div. Is innerHTML only available for native HTML or is there a better way to achieve this?










      share|improve this question














      I'm trying to display a custom format for my lightning web component via rendered and innerHTML of a div.



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


      js (data has @track):



      renderedCallback() 
      if(this.data)
      const container = this.template.querySelector('.container');
      container.innerHTML = '<lightning-input name="test" value="' + this.data.societyID + '"></lightning-input>';




      But it's giving me no errors but also not displaying anything on my div. Is innerHTML only available for native HTML or is there a better way to achieve this?







      javascript lightning-web-components dom






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Oct 1 at 7:50









      molinetmolinet

      3811 silver badge8 bronze badges




      3811 silver badge8 bronze badges























          1 Answer
          1






          active

          oldest

          votes


















          4



















          You cannot create/use innerHTML for custom components (c or lightning namespace) in LWC but you can do so for native elements. Below is the detailed explanation.



          lightning-input is Customized built-in element. So, you can logically (but does not work) use createElement




          Customized built-in elements inherit from basic HTML elements. To
          create one of these, you have to specify which element they extend (as
          implied in the examples above), and they are used by writing out the
          basic element but specifying the name of the custom element in the is
          attribute (or property). For example , or
          document.createElement("p", is: "word-count" ).




          Sample:



          <lightning-input></lightning-input>
          <lightning-button label="Add Input" onclick=addInput></lightning-button>
          <div lwc:dom="manual" class="container"></div>


          JS:



          addInput() 
          let linput = document.createElement('lightning-input', is: 'lightning-input' );
          this.template.querySelector('.container').appendChild(linput);



          OUTPUT:



          enter image description here




          Why it does not work?



          Although you are able to create lightning input element and add it
          in DOM inside div.container as shown in screenshot above, it will be
          missing the main content like span, label, input - it will not
          render. The custom lightning elements are designed and defined in such a way. For createElement to work, salesforce should release such
          native lightning API - you can check this answer -
          Not able to render dynamic Lightning Web Component
          from Software Architect at Salesforce (Lightning Platform).





          And yes native elements can be created. For example change JS to below will work:



          addInput() 
          let linput = document.createElement('input');
          this.template.querySelector('.container').appendChild(linput);






          share|improve this answer




























            Your Answer








            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "459"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );














            draft saved

            draft discarded
















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f279945%2fdiv-innerhtml-with-standard-lightning-web-components%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown


























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            4



















            You cannot create/use innerHTML for custom components (c or lightning namespace) in LWC but you can do so for native elements. Below is the detailed explanation.



            lightning-input is Customized built-in element. So, you can logically (but does not work) use createElement




            Customized built-in elements inherit from basic HTML elements. To
            create one of these, you have to specify which element they extend (as
            implied in the examples above), and they are used by writing out the
            basic element but specifying the name of the custom element in the is
            attribute (or property). For example , or
            document.createElement("p", is: "word-count" ).




            Sample:



            <lightning-input></lightning-input>
            <lightning-button label="Add Input" onclick=addInput></lightning-button>
            <div lwc:dom="manual" class="container"></div>


            JS:



            addInput() 
            let linput = document.createElement('lightning-input', is: 'lightning-input' );
            this.template.querySelector('.container').appendChild(linput);



            OUTPUT:



            enter image description here




            Why it does not work?



            Although you are able to create lightning input element and add it
            in DOM inside div.container as shown in screenshot above, it will be
            missing the main content like span, label, input - it will not
            render. The custom lightning elements are designed and defined in such a way. For createElement to work, salesforce should release such
            native lightning API - you can check this answer -
            Not able to render dynamic Lightning Web Component
            from Software Architect at Salesforce (Lightning Platform).





            And yes native elements can be created. For example change JS to below will work:



            addInput() 
            let linput = document.createElement('input');
            this.template.querySelector('.container').appendChild(linput);






            share|improve this answer































              4



















              You cannot create/use innerHTML for custom components (c or lightning namespace) in LWC but you can do so for native elements. Below is the detailed explanation.



              lightning-input is Customized built-in element. So, you can logically (but does not work) use createElement




              Customized built-in elements inherit from basic HTML elements. To
              create one of these, you have to specify which element they extend (as
              implied in the examples above), and they are used by writing out the
              basic element but specifying the name of the custom element in the is
              attribute (or property). For example , or
              document.createElement("p", is: "word-count" ).




              Sample:



              <lightning-input></lightning-input>
              <lightning-button label="Add Input" onclick=addInput></lightning-button>
              <div lwc:dom="manual" class="container"></div>


              JS:



              addInput() 
              let linput = document.createElement('lightning-input', is: 'lightning-input' );
              this.template.querySelector('.container').appendChild(linput);



              OUTPUT:



              enter image description here




              Why it does not work?



              Although you are able to create lightning input element and add it
              in DOM inside div.container as shown in screenshot above, it will be
              missing the main content like span, label, input - it will not
              render. The custom lightning elements are designed and defined in such a way. For createElement to work, salesforce should release such
              native lightning API - you can check this answer -
              Not able to render dynamic Lightning Web Component
              from Software Architect at Salesforce (Lightning Platform).





              And yes native elements can be created. For example change JS to below will work:



              addInput() 
              let linput = document.createElement('input');
              this.template.querySelector('.container').appendChild(linput);






              share|improve this answer





























                4















                4











                4









                You cannot create/use innerHTML for custom components (c or lightning namespace) in LWC but you can do so for native elements. Below is the detailed explanation.



                lightning-input is Customized built-in element. So, you can logically (but does not work) use createElement




                Customized built-in elements inherit from basic HTML elements. To
                create one of these, you have to specify which element they extend (as
                implied in the examples above), and they are used by writing out the
                basic element but specifying the name of the custom element in the is
                attribute (or property). For example , or
                document.createElement("p", is: "word-count" ).




                Sample:



                <lightning-input></lightning-input>
                <lightning-button label="Add Input" onclick=addInput></lightning-button>
                <div lwc:dom="manual" class="container"></div>


                JS:



                addInput() 
                let linput = document.createElement('lightning-input', is: 'lightning-input' );
                this.template.querySelector('.container').appendChild(linput);



                OUTPUT:



                enter image description here




                Why it does not work?



                Although you are able to create lightning input element and add it
                in DOM inside div.container as shown in screenshot above, it will be
                missing the main content like span, label, input - it will not
                render. The custom lightning elements are designed and defined in such a way. For createElement to work, salesforce should release such
                native lightning API - you can check this answer -
                Not able to render dynamic Lightning Web Component
                from Software Architect at Salesforce (Lightning Platform).





                And yes native elements can be created. For example change JS to below will work:



                addInput() 
                let linput = document.createElement('input');
                this.template.querySelector('.container').appendChild(linput);






                share|improve this answer
















                You cannot create/use innerHTML for custom components (c or lightning namespace) in LWC but you can do so for native elements. Below is the detailed explanation.



                lightning-input is Customized built-in element. So, you can logically (but does not work) use createElement




                Customized built-in elements inherit from basic HTML elements. To
                create one of these, you have to specify which element they extend (as
                implied in the examples above), and they are used by writing out the
                basic element but specifying the name of the custom element in the is
                attribute (or property). For example , or
                document.createElement("p", is: "word-count" ).




                Sample:



                <lightning-input></lightning-input>
                <lightning-button label="Add Input" onclick=addInput></lightning-button>
                <div lwc:dom="manual" class="container"></div>


                JS:



                addInput() 
                let linput = document.createElement('lightning-input', is: 'lightning-input' );
                this.template.querySelector('.container').appendChild(linput);



                OUTPUT:



                enter image description here




                Why it does not work?



                Although you are able to create lightning input element and add it
                in DOM inside div.container as shown in screenshot above, it will be
                missing the main content like span, label, input - it will not
                render. The custom lightning elements are designed and defined in such a way. For createElement to work, salesforce should release such
                native lightning API - you can check this answer -
                Not able to render dynamic Lightning Web Component
                from Software Architect at Salesforce (Lightning Platform).





                And yes native elements can be created. For example change JS to below will work:



                addInput() 
                let linput = document.createElement('input');
                this.template.querySelector('.container').appendChild(linput);







                share|improve this answer















                share|improve this answer




                share|improve this answer








                edited Oct 1 at 8:43

























                answered Oct 1 at 8:28









                salesforce-sassalesforce-sas

                14.8k2 gold badges5 silver badges30 bronze badges




                14.8k2 gold badges5 silver badges30 bronze badges































                    draft saved

                    draft discarded















































                    Thanks for contributing an answer to Salesforce Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f279945%2fdiv-innerhtml-with-standard-lightning-web-components%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown









                    Popular posts from this blog

                    Tamil (spriik) Luke uk diar | Nawigatjuun

                    Align equal signs while including text over equalitiesAMS align: left aligned text/math plus multicolumn alignmentMultiple alignmentsAligning equations in multiple placesNumbering and aligning an equation with multiple columnsHow to align one equation with another multline equationUsing \ in environments inside the begintabularxNumber equations and preserving alignment of equal signsHow can I align equations to the left and to the right?Double equation alignment problem within align enviromentAligned within align: Why are they right-aligned?

                    Training a classifier when some of the features are unknownWhy does Gradient Boosting regression predict negative values when there are no negative y-values in my training set?How to improve an existing (trained) classifier?What is effect when I set up some self defined predisctor variables?Why Matlab neural network classification returns decimal values on prediction dataset?Fitting and transforming text data in training, testing, and validation setsHow to quantify the performance of the classifier (multi-class SVM) using the test data?How do I control for some patients providing multiple samples in my training data?Training and Test setTraining a convolutional neural network for image denoising in MatlabShouldn't an autoencoder with #(neurons in hidden layer) = #(neurons in input layer) be “perfect”?