JSFiddle - React, Tailwind, and code Playground

HTML

<script>
customElements.define("web-comp", class WebComp extends HTMLElement{
  constructor(){
    super();
    this.attachShadow({mode: "open"});
    this.shadowRoot.innerHTML = `
    <style>
@keyframes slidein {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 50%;
  }
}
    </style>
    <slot><slot>
`;
  }
});
</script>

<style>
h1 {
  animation-duration: 3s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 50%;
  }

  to {
    margin-left: 0%;
  }
}

</style>

<web-comp>
  <h1>hello world</h1>
</web-comp>