title: Javascript Web-Components - Add function to the shadow-DOM
body: <p>I'm working on new web-components for my site, which work fine just with html/css. However, I was not able to <strong>add some kind of javascript functionality</strong> to my shadow DOM.</p>
  <p>In my case, it's about a button inside the component, which should trigger a function handling the event. Nevertheless, I always get an error that the function is not defined. I know that the shadow DOM should protect the inside but I do not know how to implement my js properly. Hopefully you can help :)</p>
  <pre><code>class InfoSmall extends HTMLElement {
  // attributes
  constructor() {
    super();
    // not important
  }
  
  // component attributes
  static get observedAttributes() {
    return [''];
  }
  
  // attribute change
  attributeChangedCallback(property, oldValue, newValue) {
    if (oldValue == newValue) return;
    this[ property ] = newValue;
  };
  
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
  
    shadow.innerHTML = `
    &lt;div class=&quot;container&gt;
       &lt;button id=&quot;copy&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;`
  
    shadow.querySelector('#copy').addEventListener(&quot;click&quot;, function () {
      // functionality
    });
  }
  }
  </code></pre>
  <p>I also tried the <strong>onclick-attribute</strong> but it was the same for me: no function defined. Or I also tried writing the <strong>script inside the innerHTML</strong> with an HTML-tag...</p>