JSFiddle - React, Tailwind, and code Playground

by tikosar

HTML

<p>
Examples with different combinations of <code>animation</code> and <code>@keyframes</code> being defined in the outer scope styles (outside) and inside shadow dom.
</p>

<h3>Defined on the <code>:host</code></h3>
<div class="examples host-examples">
  <div class="host-1"></div>
  <div class="host-2"></div>
  <div class="host-3"></div>
  <div class="host-4"></div>
</div>

<h3>Defined on the <code>::part</code></h3>
<div class="examples part-examples">
  <div class="host-1"></div>
  <div class="host-2"></div>
  <div class="host-3"></div>
  <div class="host-4"></div>
</div>

CSS

@font-face {
  font-family: 'Outer';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/silkscreen/v1/m8JXjfVPf62XiF7kO-i9YLNlaw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.examples {
  display: flex;
  gap: 10px;
}

.host-examples > div,
.part-examples > div::part(anim) {
  padding: 1em;
  background: black;
  color: white;
}

.part-examples > div::part(anim) {
  box-sizing: border-box;
  height: 100%;
}

@keyframes glow-outer {
  to {
    background: darkorange;
  }
}

.host-examples > .host-3 {
  font-family: "Inner";
  animation: glow-inner 1s infinite alternate linear;
}

.host-examples > .host-4 {
  font-family: "Outer";
  animation: glow-outer 1s infinite alternate linear;
}

.part-examples > .host-3::part(anim) {
  font-family: "Inner";
  animation: glow-inner 1s infinite alternate linear;
}

.part-examples > .host-4::part(anim) {
  font-family: "Outer";
  animation: glow-outer 1s infinite alternate linear;
}

JavaScript

const keyframes = `
	@keyframes glow-inner {
    to {
      background: brown;
    }
  }
`

const fontFamily = `
	@font-face {
    font-family: 'Inner';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dynapuff/v1/z7N5dRvsZDIVHbYPMhZJ3HQ83UaSu4uhr7-ZFeoYkgAr1x8RSxYu2Y_hSA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
`



/* :host */
document.querySelector('.host-examples .host-1').attachShadow({mode: 'open'}).innerHTML = `
	<style>
    ${fontFamily}
    
  	:host {
      font-family: "Inner";
      animation: glow-inner 1s infinite alternate linear;
    }
    
    ${keyframes}
  </style>
  <code>animation</code>, <code>@keyframes</code> and <code>@font-face</code> all defined inside
`

document.querySelector('.host-examples .host-2').attachShadow({mode: 'open'}).innerHTML = `
	<style>
  	:host {
    	font-family: "Outer";
      animation: glow-outer 1s infinite alternate linear;
    }
  </style>
  <code>animation</code> defined inside, <code>@keyframes</code> and <code>@font-face</code> defined outside
`

document.querySelector('.host-examples .host-3').attachShadow({mode: 'open'}).innerHTML = `
	<style>
    ${keyframes}
    ${fontFamily}
  </style>
  <code>animation</code> defined outside, <code>@keyframes</code> and <code>@font-face</code> defined inside
`

document.querySelector('.host-examples .host-4').attachShadow({mode: 'open'}).innerHTML = `
  <code>animation</code>, <code>@keyframes</code> and <code>@font-face</code> all defined outside
`



/* ::part */
document.querySelector('.part-examples .host-1').attachShadow({mode: 'open'}).innerHTML = `
	<style>
    ${fontFamily}
  	[part=anim] {
    	font-family: "Inner";
      animation: glow-inner 1s infinite alternate linear;
    }
    
    ${keyframes}
  </style>
 ...