<h1>half-light.js</h1>
<p>Tiny library demo...</p>
<p>Below are two custom elements with their own shadow doms using <a href="https://github.com/bkardell/half-light"  target="_blank">half-light.js</a> to experiment with things about styling the shadow dom from the outside.</p>
<p>Read the CSS panel for more :) Play with it yourself. Share your thoughts <a href="https://github.com/bkardell/half-light/issues/1" target="_blank">in this easy sentiment poll/thread</a></p>
  
<div class="container">
  <hell-o></hell-o>
  <buh-bye></buh-bye>
</div>

/* Applies to your page (obviously) */
.container { display: flex; }	
body {background-color: peachpuff; }
	p { background-color: orange; }
	
	
	/* Applies to your page *and all shadow roots* */
	@media screen, (--crossroot) {
		h1 {
			background-color: hotpink;
			color: white;
		}
	}
	
	/* You can also add a filter
	   @media screen, (--crossroot(selector)) {...}
	
	   And these rules will only apply to the shadow dom
	   of elements which match that selector...
	
	   for example...
	*/
	@media screen, (--crossroot(hell-o)) {
	  h1 {
	    font-style: italic;
	  }
	}
	
	/* Or, if you prefer */
	@media screen, (--crossroot(:not(hell-o))) {
	  h2 {
	    font-size: 1rem;
	    font-weight: bold;
	    background-color: cornsilk;
	  }
	}
	
	
	/* Finally... you can do the same _without_
	   having it affect your page too! That is, if you 
	   want rules that _only_ apply in shadow doms, you
	   just leave off the "screen, "....*/
	@media --crossroot(hell-o, buh-bye) {
	  h1 {
	    border: medium solid limegreen;
	  }
	}

/* 
  some very simple elements with a shadow dom to demonstrate...
*/
class HellOElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.shadowRoot.innerHTML = `
<div style="border: 1px solid currentColor;
    width: fit-content;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;">
  <h1>Hello</h1>
  <h2><slot>World</slot><h2>
</div>
`
  } 
}

customElements.define('hell-o', HellOElement)

class BuhByeElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.shadowRoot.innerHTML = `
<div style="border: 1px solid currentColor;
    width: fit-content;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;">
  <h1>Buh</h1>
  <h2><slot>Bye</slot><h2>
</div>
`
  } 
}

customElements.define('buh-bye', BuhByeElement)