Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<style>
  /* DOES NOT WORK */
  /*test-comp::part(test-part) {
    animation: test 1s infinite;
  }*/
  
  /*test-comp {
    animation: test 1s infinite;
  }*/
  
  /* WORKS */
  /*div {
    animation: test 1s infinite;
  }*/
  
  /* WORKS */
  /*div::after {
    animation: test 1s infinite;
  }*/
  
  div,
  test-comp {
    width: 100px;
    height: 100px;
    background: blue;
    margin: 10px;
    display: block;
  }
  
  test-comp::part(test-part),
  div::after {
    background: white;
    border: 2px solid black;
    width: 25px;
    height: 25px;
    display: block;
    content: "";
  }
  
@keyframes test {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
<div></div>
<test-comp></test-comp>
 
  const template = document.createElement('template');
  template.innerHTML = `<div part="test-part"></div>`;
  class TestComp extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
  window.customElements.define('test-comp', TestComp);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers