Allow CSS variables to cascade down to child components

I'm currently working on a project using Polymer 2 to create a collection of components. However, I've encountered an issue with CSS variables when viewing the components in browsers other than Chrome.

One of my components, a wrapper component called x-page, has a theme property that can be set to either light or dark. The CSS for this component looks like this:

:host([light]) {
    ---color-1: rgb(200,200,200);
    ---color-2: rgb(210,210,210);
}
:host([dark]) {
    ---color-1: rgb(10,10,10);
    ---color-2: rgb(20,20,20);
}

My goal is to use these variables in all child components within this wrapper, including those encapsulated within shadow roots, not just ones slotted directly into the parent component.

While this functionality works as expected in Chrome, it doesn't seem to function properly in other browsers despite utilizing apply-shim polyfill and experimenting with custom styles.

Your assistance in resolving this issue would be greatly appreciated :)

cssweb-componentpolymer-2.xshadow-domshady-dom

Answer №1

If you want to ensure that CSS styles are applied with the Shadow DOM polyfill, you need to first prepare the <template> before appending it to the shadow root using the ShadyCSS.prepareTemplate() function. For detailed instructions, refer to the ShadyCSS polyfill page:

ShadyCSS.prepareTemplate( template1, 'x-page' )

Here is an example:

ShadyCSS.prepareTemplate( template1, 'x-page' )
class XPage extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: "open" } )
            .appendChild( template1.content.cloneNode( true ) )
    }
}
customElements.define( 'x-page', XPage )
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-bundle.js"></script>

<template id="template1">
    <style>
        :host([light]) {
            ---color-1: red;
            ---color-2: pink;
        }
        :host([dark]) {
            ---color-1: yellow;
            ---color-2: black;
        }
        span { 
            color: var(---color-1);
            background-color: var(---color-2);
        }
    </style>
    <span><slot></slot></span>
</template>

<x-page light>Light</x-page>
<x-page dark>Dark</x-page>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate content upon button click using Javascript

Looking to create a unique Survey layout that includes: Question Name Options The question name is editable and can be changed with a click. Initially, there is one option with a checkbox to select it. This option should also update when clicked. Addit ...

javascripthtmlcsssurvey

Adjust the size of an SVG to perfectly fit within a designated div

I've looked through several discussions here, but none of the suggested solutions seem to work for my specific situation. My issue involves an SVG that was created on a different website. It contains three elements, and I'd like to embed it whil ...

htmlcsssvg

Unable to create transparent div

I am currently working on a test page located at this link. As you scroll down the page, you will notice that the logo remains fixed in the background while an area I have painted purple scrolls over it. I chose to make this area purple temporarily for vi ...

htmlcss

Height of Bootstrap 4 footer aligned to the bottom

I've made a template that sets the height of the footer to 120px and specifies the line-height as well. Here is an example: .footer { height: 120px !important; line-height: 120px !important; } <!doctype html> <html lang="en"> &l ...

htmlcsstwitter-bootstrapbootstrap-4

What is the solution to preventing Prettier in VS Code from breaking up CSS Selectors onto different lines?

I am trying to achieve this code style: h1,h2,h3,h4,h5 { font-weight: 400 !important; } However, Prettier - Code Formatter is splitting each selector into separate lines like this: h1, h2, h3, h4, h5 { font-weight: 400 !important; } The issue of CSS ...

htmlcssvisual-studio-codecss-selectorsprettier

What is the best way to display photos horizontally instead of vertically on a webpage?

Is there a way to display these photos (found at ) in a row instead of a column? Can someone provide instructions on how to achieve this? Additionally, should I use one div for all the images or create a separate div for each image? Furthermore, it would ...

csswordpresshtml-tablehtml

Issues with flex grow and flex shrink not being effective arise when an adjacent flex element contains lengthy text

How can I ensure that the color swatch fills the designated space in the CSS (width: 40px) while allowing the label to shrink? The issue arises when the label is a long word such as "Corn flower blue", causing the color swatch to shrink instead of maintain ...

csstwitter-bootstrapbootstrap-4flexbox

Using pure JavaScript, implement a transition effect that changes an element's display from

My goal is to create an animation where a hidden menu box slides down and appears when the mouse hovers over a button. The animation works correctly, but I encountered an issue when trying to add the transition from display:inline-block to display:none and ...

javascriptcsscss-transitionstransform

Navigating the art of employing different fonts for a website

I am looking to incorporate the trainway font into my website, but I'm concerned that the user may not have it installed on their device. Is there a way to showcase text in a specific font without requiring the user to download and install it? Thank ...

javascripthtmlcss

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

javascripthtmljquerycsscarousel

When the condition is fulfilled within an HTML document

I'm a novice in the world of django. Currently, I am working on creating a poll application using django. My aim is to show the message, 'you entered correct'. if selected_choice='Yellow' Below is the code snippet I am using: de ...

pythonhtmlcssif-statement

Adjust the width of the <li> element based on the quantity of its children

If the number of list items can be changed dynamically, how can I adjust the width of each item so that the total width is always 100%? Here is an example code snippet: <nav> <ul> <li>A</li> <li>B</li> &l ...

htmlcss

What methods are available to optimize my text for various screen sizes and adjust its position correctly?

Is there a way to make my text adjust to different screen sizes and remain fixed in position? I would like my text to be centered and have its position fixed Did I do the right thing by centering the text or is there a better way? Also, how can I solve m ...

htmlcssbootstrap-4

Steps for removing form validation from non-conditional formControls

My issue is with a form-control that displays a success mark after submission, even though there are no validation conditions in place. Is there a way to disable this validation? <Form noValidate validated={validated} onSubmit={e => this.ha ...

cssreactjsreact-bootstrap

Tips for deleting text on a webpage either prior to or following a certain character

Is there a way to remove everything after either 'am' or 'pm' in the date (the excerpt) on a WordPress site that has a list of headlines followed by a source attribution and a date? Example: NBA Finals: Warriors will face Cavaliers ye ...

jquerycss

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below? <html> <head> <title>Untitled Document</title> <style type="text/css ...

htmlcsssubmenu

absence of a scrollbar on smaller window display

My website is experiencing an issue: everything displays properly when the window size matches or exceeds the background image, but on a smaller window, there is no scroll bar which causes the footer to disappear. Here is an image showing what happens wit ...

htmlcssbrowserwindow

Adjusting the spacing between dropdown menu items in Bootstrap sass with Rails

After adding the bootstrap-sass gem to my app, I have implemented two dropdown menus on the right side of the screen. Although they are horizontally aligned, I find that they are too close to each other. I would like to create some space between them and ...

cssruby-on-railsbootstrap-4bootstrap-sass

Ensure that the URL is updated correctly as the client navigates between pages within a Single Page Application

Seeking a solution for maintaining the URL in a Single Page application as the client navigates between pages, with the URL changing in the background. I attempted using @routeProvider but it doesn't seem to be suitable for my situation. Any suggestio ...

angularjshtmlcssurl

Navbar collapse not functioning properly on HTML, CSS, and JavaScript

I have developed a CSS code snippet: .nav{ right: 0px; left: 0px; margin-top: 0px; margin-bottom:20px; height: 35px; text-align: center; background-color: red; z-index: 1; } .sticky { background: #000; text-align: center; ...

javascriptjqueryhtmlcsstwitter-bootstrap