0

Accordingly to sources Shadow DOM should not let external styles in. However, either I do not understand it correctly, either I have made sth. wrong or it does. Please have a look here

https://kiszuriwalilibori-about-me.netlify.app/

Just inspect my name. The span inside heritages( what can be verified checking/unchecking color). The code that creates this element is

customElements.define('author-name', class extends HTMLElement {
      constructor() {
        super()
          .attachShadow({ mode: 'open' })
          .innerHTML = `
<style>
  span{
    font-family: "Oxygen", sans-serif;
    font-size: calc(16px + 32 * ((100vw - 320px) / 1080));
    color: #FB6542;
  }
  @media (max-width: 700px) {span {font-size:3rem;}}
  @media (max-width: 508px) {span {font-size:2rem;}}
</style>
<span>Piotr Maksymiuk</span>`;
      }
});
<author-name></author-name>

So, do I not understand or the code is invalid?

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
Janko Walski
  • 21
  • 6
  • Nothing wrong here; you define a style **within** the shadowDOM; it gets applied to the span – Danny '365CSI' Engelman Oct 06 '20 at 11:34
  • You are right - but just open DevTools and inspect span. It heritages, really. You can check the font color for example. And in my understanding it shouldn't be possible – Janko Walski Oct 06 '20 at 11:36
  • Inherited properties cascade into shadowDOM. See (2017) https://stackoverflow.com/questions/47189985/shadow-dom-inheriting-parent-page-css-chrome and https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ – Danny '365CSI' Engelman Oct 06 '20 at 13:32

0 Answers0