<main>
  <h1>CSS ::selection inheritance demo</h1>
  
  <p>Instructions: Select some of the text in the following demos. Try this in Chrome 134+.</p>
  
  <div class="warning"><p>⚠️ You are not using a Chromium-based browser that is at least Chromium 134. As a result, the expected behavior described in this demo will most likely make no sense.</p></div>
  
  <h2>Demo1</h2>
  <div class="demo" id="demo1">
    <p>I am a paragraph in a box. For clarity a dotted outline is added around the paragraph.</p>
    <p>The enclosing box has the following snippet applied to it:</p>
    <pre><code>#demo1::selection {
  color: green;
}</code></pre>
    <p>It sets the <code>::selection</code> style for the entire <code>#demo1</code> element <b>and its descendants</b>.</p>

    <p>Before Chrome 134, the selection styles would only be set on the <code>#demo</code> element itself. As a result none of the paragraphs in this box would be <code>green</code> when highlighted, because they are not the <code>#demo1</code> element but descendants of it.</p>
    
    Text like this, which is placed directly inside <code>#demo</code> without any enclosing <code>&lt;p&gt;</code>, does get a highlight color in Chrome &lt; 134, because it is matched by <code>#demo1::selection</code>.
    
    <p>(In the text above though, in Chrome &lt; 134, you end up in this weird situation in which the <code>&lt;code&gt;</code> elements don’t get the highlight color)</p>
    
    <p>As of Chrome 134, the regular properties of the <code>#demo1::selection</code> selection styles also inherit onto children of <code>#demo1</code>.</p>
    
    <div><p>That means that even paragraph like this one, which is wrapped in an extra div (also with a dotted outline) or this <code>&lt;code&gt;</code> element is also green when highlighted.</p></div>
    
  </div>
  
  <h2>Demo2</h2>
  <div class="demo" id="demo2">
    <p>This box has the following snippet applied to it:</p>
    <pre><code>#demo2 {
  --bg: lightcoral;
}
    
#demo2::selection {
  color: green;
  background: var(--bg);
}</code></pre>
    <p>All selected text in this box is therefore <code>green</code> with a <code>lightcoral</code> background.</p>
    <p>The following CSS is also present:</p>
    <pre><code>#demo2 p {
  --bg: hotpink;
}</code></pre>
    <p>It, however, has no effect on the paragraphs because the <code>::selection</code> styles are defined through <code>#demo2::selection</code> which gets its value for <code>--bg</code> from the originating element <code>#demo2</code>.</p>
  </div>
  
  <h2>Demo3</h2>
  <div class="demo" id="demo3">
    <p>This box has the following snippet applied to it:</p>
    <pre><code>#demo3 {
  --bg: lightcoral;
}
    
#demo3::selection {
  color: green;
}

#demo3 ::selection {
  background: var(--bg);
}</code></pre>
    <p>Just like in <code>#demo2</code> highlighted text is <code>green</code> with a <code>lightcoral</code> background.</p>
    <p>But by having <code>#demo3 ::selection</code> in there–note the space–it allows every child of <code>#demo3</code> to declare its own <code>--bg</code>.</p>
    <div><p>For example, this paragraph is wrapped in a <code>div</code>. Because of the following CSS, its background color is <code>yellow</code>.</div>
    <pre><code>div {
  --bg: yellow;
}</code></pre>
    <p>This is because custom properties for highlight pseudos are inherited from the originating element.</p>
  </div>
  
  <h2>Demo4</h2>
  <div class="demo" id="demo4">
    <p>This box has the following snippet applied to it, which is the same as <code>#demo3</code>:</p>
    <pre><code>#demo4 {
  --bg: lightcoral;
}
    
#demo4::selection {
  color: green;
}

#demo4 ::selection {
  background: var(--bg);
}</code></pre>
    
    <p class="special">This paragraph with the class of <code>.special</code> is styled as follows:</p>
    <pre><code>p.special {
  --bg: hotpink;
}
p.special::selection {
  --bg: lime;
}</code></pre>
    <p class="special">The interesting thing here is that the <code>--bg</code> is set to <code>lime</code> for <code>p.special::selection</code>. This custom property only affects the selection styles of <code>p.special</code> and does not inherit onto child <code>::selection</code> styles. You can see this on the nested <code>&lt;code&gt;</code> elements: they are <code>hotpink</code>, not <code>lime</code>.</p>
    <p>Again, just like in <code>#demo3</code>, this is because <b>custom properties for highlight pseudos are inherited from the originating element</b> – they don’t inherit through the highlight chain.</p>
    <p>This behavior is compatible with Chrome &lt; 134.</p>
  </div>
  
  <h2>In summary</h2>
  <div class="demo" id="demo5">
    <p>This thing you have to remember is that:</p>
    
    <ul>
      <li>Regular properties in highlight pseudos inherit through the highlight chain.</li>
      <li>Custom properties in highlight pseudos inherit from their originating element.</li>
    </ul>
    <p>For backwards compatibility don’t only set things like <code>color</code> on <code>element::selection</code> but also on <code>element ::selection</code>. Custom Properties don’t need a fixup, as their behavior did not change.</p>
    <pre><code>#demo5 {
  --bg: yellow;

  code {
    --bg: #CBC3E3;
  }

  /* Regular properties = prefix with element */
  &::selection {
    color: red;
  }
  
  /* Backwards compatibility */
  & *::selection {
    color: red;
  }

  /* Custom properties = no prefix */
  ::selection {
    background: var(--bg, transparent);
  }
}</code></pre>
    <div><p>This also works on this paragraph which is wrapped in a <code>div</code> element.</p></div>
  </div>
</main>

:root {
  --color: hotpink;
}

#demo1 {
  &::selection {
    color: green;
  }
}

#demo2 {
  --bg: lightcoral;
  
  &::selection {
    color: green;
    background: var(--bg);
  }

  p {
    --bg: hotpink;
  }
}

#demo3 {
  --bg: lightcoral;
  &::selection {
    color: green;
  }
  *::selection {
    background: var(--bg);
  }
  
  div {
    --bg: yellow;
  }
}

#demo4 {
  --bg: lightcoral;
  &::selection {
    color: green;
  }
  *::selection {
    background: var(--bg);
  }
  
  p.special {
    --bg: hotpink;
  }
  p.special::selection {
    --bg: lime;
  }
  
}

#demo5 {
  --bg: yellow;

  /* Regular props = prefix with element */
  &::selection {
    color: red;
  }
  
  /* Backwards compatibility */
  & *::selection {
    color: red;
  }
  
  /* Custom props = no prefix */
  ::selection {
    background: var(--bg, transparent);
  }
  
  code {
    --bg: #CBC3E3;
  }
}

.demo {
  border: 1px solid black;
  padding: 2em;
  background: aliceblue;
  margin-bottom: 2em;
  
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
  
  p, div {
    outline: 1px dashed #ccc;
    padding: 0.25em;
  }
    
  div p {
    margin: 0;
  }
}

main {
  max-width: 40em;
  margin: 0 auto;
}

@layer baselayout {
  * {
    box-sizing: border-box;
  }
  html {
    margin: auto;
    line-height: 1.5;
    font-size: 24px;
    font-family: "Syne", sans-serif;
    height: 100%;
    background: white;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    padding: 2em;
  }

  footer {
    text-align: center;
    font-style: italic;
    margin-top: 2rem;
  }

  h1,
  h2,
  summary {
    font-family: "Anybody", sans-serif;

    text-decoration: underline;
    text-decoration-color: hsl(156deg 100% 50% / 50%);
    text-decoration-thickness: 0.2rem;
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
  }

  h2 {
    margin: 2em 0 0.5em 0;
    text-decoration-color: hsl(240deg 100% 50% / 50%);
    text-wrap: balance;
  }

  a {
    color: inherit;
  }

  button,
  input,
  textarea {
    font-family: inherit;
    font-size: inherit;
  }
}

@layer code {
  pre {
    border: 1px solid #dedede;
    padding: 0.5em;
    background: #f7f7f7;
    font-family: "Courier 10 Pitch", Courier, monospace;
    overflow-x: auto;
    border-left: 0.4em solid cornflowerblue;
    tab-size: 4;
  }

  code:not(pre code) {
    background: #f7f7f7;
    border: 1px solid rgb(0 0 0 / 0.2);
    padding: 0.1rem 0.3rem;
    margin: 0.1rem 0;
    border-radius: 0.2rem;
    /*      display: inline-block; */
    -webkit-box-decoration-break: clone;
    white-space: pre-wrap;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

@layer warning {
    .warning {
      display: none;
      box-sizing: border-box;
      padding: 1em;
      margin: 1em 0;
      border: 1px solid #ccc;
      background: rgba(255 255 205 / 0.8);
    }

    .warning > :first-child {
      margin-top: 0;
    }

    .warning > :last-child {
      margin-bottom: 0;
    }

    .warning a {
      color: blue;
    }
    .warning--info {
      border: 1px solid #123456;
      background: rgb(205 230 255 / 0.8);
    }
    .warning--alarm {
      border: 1px solid red;
      background: #ff000010;
    }
  }
}

const getChromiumVersion = (brands) => {
  const chromium = brands.filter(b => b.brand == 'Chromium');
  return chromium[0]?.version ?? 0;
}

const isChromium = (brands) => {
  return brands.filter(b => b.brand == 'Chromium').length;
}

if (!navigator.userAgentData || !isChromium(navigator.userAgentData.brands) || getChromiumVersion(navigator.userAgentData.brands) < 134) {
  document.querySelector('.warning').style.display = 'block';
}