Can the bleeding of :root styles into a shadowed component be avoided?

Question

Can the bleeding of :root styles into a shadowed component be avoided?

After creating a web component using Stencil that utilizes the shadow DOM and requires ignoring any externally added CSS (thanks to its own stylesheet), I employed the common fix for the component stylesheet:

:host {
  all: initial;
}

This code effectively resets any base styles set on the page via the <style> tag or an external stylesheet. Nonetheless, issues arise when dealing with inherited styles like font-size from the :root or html elements, which override calculated values such as 1rem, disregarding my specified font sizes in the component's CSS.

For instance, despite implementing the CSS reset mentioned above and aiming for a base size of 16px, my development tools reveal that a font-size: 160px value applied to the :root is utilized when computing the final font size for an element designated with font-size: 0.875rem.

https://i.sstatic.net/LERrN.png

I have delved into various resources regarding styles attributed to the :root element, yet finding a solution remains elusive. Is there a method to override styles impacting relative values when they originate from the :root element?

css web-component shadow-dom stenciljs

Answer 1

Answer №1

Check out this fun coding playground: https://jsfiddle.net/WebComponents/L5kbf8qm/

<style>
  :root {
    font-size: 15px;
  }
</style>
<my-element all="initial"></my-element>
<my-element all="inherit">See how the UA 8px margin is restored here</my-element>
<script>
  customElements.define("my-element", class extends HTMLElement {
    connectedCallback() {
        let all = this.getAttribute("all");
      this.attachShadow({mode:"open"})
          .innerHTML = `<style>`+
                       `  :host{all:${all}}` +
                       `  div{font-size:2rem;background:pink}`+
                       `</style>` +
                       `<div>Component all:${all}</div>`+
                       `<span id=result ></span><slot></slot>`;
      const showFontSize = (name) => {
        let size = window.getComputedStyle(this.shadowRoot.querySelector(name))["font-size"];
        this.shadowRoot.querySelector("#result").append(`${name} font-size is: `, size, document.createElement("br"));
      }
      showFontSize("div");
      showFontSize("span");
    }
  })
</script>

Answer 2

Check out this fun coding playground: https://jsfiddle.net/WebComponents/L5kbf8qm/

<style>
  :root {
    font-size: 15px;
  }
</style>
<my-element all="initial"></my-element>
<my-element all="inherit">See how the UA 8px margin is restored here</my-element>
<script>
  customElements.define("my-element", class extends HTMLElement {
    connectedCallback() {
        let all = this.getAttribute("all");
      this.attachShadow({mode:"open"})
          .innerHTML = `<style>`+
                       `  :host{all:${all}}` +
                       `  div{font-size:2rem;background:pink}`+
                       `</style>` +
                       `<div>Component all:${all}</div>`+
                       `<span id=result ></span><slot></slot>`;
      const showFontSize = (name) => {
        let size = window.getComputedStyle(this.shadowRoot.querySelector(name))["font-size"];
        this.shadowRoot.querySelector("#result").append(`${name} font-size is: `, size, document.createElement("br"));
      }
      showFontSize("div");
      showFontSize("span");
    }
  })
</script>

Can the bleeding of :root styles into a shadowed component be avoided?

Answer №1

Similar questions

"Strategies for Handling Various Screen Resolutions in HTML

Using jQuery to center the target ID element of an href on the page with scrollIntoView

Having trouble with the Jquery Slider script?

What would cause a flex-basis calculation to throw an error in SASS?

The table is too wide for its parent mat-nav-list, stretching to 100%

Tips for vertically aligning input field text and checkboxes

The benefits of utilizing `calc()` compared to `transform` for positioning elements

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

What is the method to apply custom styles (CSS) to individual options within a jQuery UI selectmenu?

Creating a responsive layout with two nested div elements inside a parent div, all styled

Customizing HTML forms using WordPress Divi's custom CSS techniques

Adjust the width of the table data cells dynamically in HTML and CSS based on the screen resolution and content

Can the CSS file be modified while a MVC site is running?

How can I incorporate margins or adjust scaling within dompdf?

Are you seeking precise parsing for PHP, JavaScript, and CSS?

jscrollpane does not work properly in Firefox, but it functions correctly in Chrome

Issue with Spyscroll functionality

Understanding the reasons for floated elements impacting the heights of non-floated elements (D7 views blocks using the zen theme)

The navigation bar is smaller in size compared to the brand logo

Unique behavior and design specifically tailored for Safari viewing