<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

* {
  box-sizing: border-box;
}
body {
  display: flex;
  margin: 0;
}
.humans,
.zombies {
  width: 50%;
  height: 100vh;
  padding: 2em;
  background-color: #ddd;
}
.zombies {
  background-color: #ded;
}

customElements.define(
  "postapocalyptic-person",
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: "open" });
    }
    connectedCallback() {
      let image = document.createElement("img");
      if (this.parentNode.classList.contains("humans")) {
        image.src = "https://assets.codepen.io/1804713/lady.png";
        this.shadowRoot.appendChild(image);
      } else if (this.parentNode.classList.contains("zombies")) {
        image.src = "https://assets.codepen.io/1804713/ladyz.png";
        this.shadowRoot.appendChild(image);
      }
    }
  }
);