0

Because I would like to keep the custom element self-contained, I want to avoid putting a reference to the member variable on the window object.

customElements.define( 'component-one', class extends HTMLElement {
    connectedCallback() {
        this.memberVariable="This is a member variable";
        this.innerHTML = "<button onclick='//How do I reference the above this.memberVariable here?'>This is a button</button>";
    }
}):
user2939415
  • 864
  • 1
  • 11
  • 22
  • 2
    Possible duplicate of [Access class function in Web Component from inline Element](https://stackoverflow.com/questions/53963583/access-class-function-in-web-component-from-inline-element) – Supersharp Sep 18 '19 at 23:13

1 Answers1

0

I believe something like this will help -: 

customElements.define( 'component-one', class extends HTMLElement {
    connectedCallback() {
        var self = this;
        this.memberVariable="This is a member variable";
        this.innerHTML = "<button onclick='self.memberVariable // use this variable as required'>This is a button</button>";
    }
}):
Abhisar Tripathi
  • 1,569
  • 10
  • 21
  • I tested this code, and it appears that `self` refers to `window` inside the event handler. Were you able to get this code to work? – user2939415 Sep 18 '19 at 20:40