title: How to get Properties from an Element of the ShadowDOM of my Component
body: <p>How can I get the value of the attribute &quot;checked&quot; of the input Element which is in the ShadowDOM.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class BitBoxComponent extends HTMLElement {
    static get observedAttributes() {
      return ["checked"];
    }
  
    constructor() {
      super();
      this.inputElem = document.createElement("INPUT");
      this.inputElem.setAttribute("type", "checkbox");
      this.inputElem.setAttribute("checked", false);
  
      //    this.inputElem.style.border = "solid 1px grey";
  
      const style = document.createElement("style");
      style.textContent = ``;
  
      const shadow = this.attachShadow({
        mode: "open"
      });
      shadow.appendChild(style);
      shadow.appendChild(this.inputElem);
    }
  
    attributeChangedCallback(name, oldValue, newValue) {
      if (oldValue === newValue) return;
      var isTrueSet = newValue == "true";
      this.inputElem.checked = isTrueSet;
  
    }
  }
  
  customElements.define("bit-box", BitBoxComponent);
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
    const bit = document.getElementById("bit-7").getAttribute("checked");
    console.log(bit);
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;bit-box id="bit-7"&gt;&lt;/bit-box&gt;
  &lt;bit-box id="bit-6"&gt;&lt;/bit-box&gt;
  &lt;bit-box id="bit-0"&gt;&lt;/bit-box&gt;
  &lt;!--    https://github.com/mateusortiz/webcomponents-the-right-way --&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>after a click on the checkbox the value of the attribute &quot;checked&quot; should change.
  And then I want to get the value to work with it.</p>