<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);
}
}
}
);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.