I'm new to LWC and trying to create a simple LWC component with input field. I have loaded 3rd party zip folder in Static Resource which contain JS and CSS file.

Scenario - If user types street name into input field then I want to populate address suggestion using 3rd party JS library.

Currently I'm not able to populate below is the screenshot.

enter image description here

Below is the screenshot of component what I'm expecting output using 3rd party JS.

enter image description here

Below is the code in LWC

    <div class="slds-p-around_medium">
        <label class="slds-form-element__label">Street Address</label>
        <input id="streetAddress" name="streetAddress" class="slds-input" type="text" lwc:dom="manual" placeholder="Address Search" value={postalCodeFieldValue}/>


import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import addresscompleteResource from '@salesforce/resourceUrl/addresscomplete';
export default class VS_PostalCode extends LightningElement {


    connectedCallback() {
        if (this.jsInitialized) {
        this.jsInitialized = true;
            loadStyle(this, addresscompleteResource + '/addresscomplete.css'),
            loadScript(this, addresscompleteResource + '/addresscomplete.js')
            .then(() => {

    callAddressCompleteJS() {
        var fields = [
            { element: "streetAddress", field: "Line1" }
            options = {
                key: "UE16-PK48-CT42-MD73"
            control = new pca.Address(fields, options);
        control.listen("populate", function (address) {
  • What problem you are facing? May 27, 2020 at 6:42
  • I'm not able to populate street address in input field using 3rd party JS, let me edit question May 27, 2020 at 6:44
  • Did you get any error? May 27, 2020 at 7:06
  • In browser console, I'm not able to see any error but I feel there is issue with LWC Locker service which is blocking DOM modification. May 27, 2020 at 8:04

1 Answer 1


The script can't find the element by Id, so it won't know which element to attach to. At minimum, you need to dynamically grab the Id:

const fields = [
  { element: this.template.querySelector('input[name=streetAddress]').id, field: 'Line1' }

This is required because the ID values are generated dynamically during runtime, so you can't possibly predict the ID ahead of time. I checked the documentation, it doesn't seem to allow simply passing in an element, which would be ideal, so this is the next best solution.

Alternatively, consider just using their API and writing your own UI; this may be more efficient in terms of ease of use, although this appears to be a metered API, so I can't speak for its cost.

  • This answer points to how you need to triage these sorts of errors; use your browser's JavaScript debugger to see what's happening as you step through the code, and to examine the DOM to make sure it looks like what you expect.
    – Phil W
    May 27, 2020 at 7:53
  • Hi @sfdcfox I tried your code but still no luck. I think there is issue with LWC locker service. What you say? May 27, 2020 at 7:55
  • @ChetanNandre I don't have enough information to tell. I would need the error message(s) you're seeing to provide more information. This appears to be a simple script, though I didn't download it to verify (requires registration?). I only provided an answer based on available information. If you're getting problems at this point, it's probably because you didn't set the CSP. We can give you better answers if we knew what errors you got?
    – sfdcfox
    May 27, 2020 at 8:06
  • @sfdcfox I have added URL into CSP and I tried using Aura Component and working fine. In browser console, I'm not able to see any error but I feel there is issue with LWC Locker service which is blocking DOM modification May 27, 2020 at 9:09
  • @ChetanNandre Locker Service is the same between Aura and LWC. If it works in Aura, it should work in LWC.
    – sfdcfox
    May 27, 2020 at 14:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .