Issue with the image style of paper-card under #shadow-root not functioning in Polymer project

I've been experimenting with Polymer 2.0 and have utilized the polymer paper-card element to showcase some text along with an image. My challenge is to style the image that lies within the <iron-image>#shadow-root.

Here's the code snippet:

<paper-card elevation="1" aria-label="">

<iron-image>
#shadow-root
<img id="img" hidden="" src="/images/image.jpg">
</iron-image>

<div class="card-content">
<h2>Title</h2>
Some text here..
</div>
</paper-card>

I attempted to use a CSS rule mentioned in this Stack Overflow answer: 

paper-card iron-image::shadow #shadow img {
   display: block;      
}

Unfortunately, it didn't work for me. Could there be something incorrect in this code?

htmlcsspolymerpolymer-2.x

Answer №1

For a solution, consider using paper-card ::slotted(iron-image). Take a look at this resource for more information on styling distributed children.

An alternative approach is to utilize --paper-card-header-image in your CSS code:

paper-card {
    --paper-card-header-image: {
        display: block;
    };
}

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

I am interested in creating a JavaScript function that can transform an image to either a blue or yellow hue using CSS styling

Check out this code snippet. <svg class="defs-only"> <filter id="monochrome" color-interpolation-filters="sRGB" x="0" y="0" height="100%" width="100%"> <feColorMatrix type="matrix" values="0.00 0 0 0 0 ...

javascriptjqueryhtmlcss

The CSS zigzag border functionality seems to be malfunctioning on Internet Explorer

On my clients website, I decided to use a zigzag css border instead of an image for speed purposes. I wanted to have different colors and variations, but I encountered a problem. While my version displayed correctly on Chrome and Firefox using Windows, it ...

cssinternet-explorer

What is the best way to apply styling exclusively to a child component?

I am currently working on a coding project that involves a parent component and multiple child components. My main goal is to adjust the position of a filter icon by moving it down 5 pixels on one specific child component. The issue I am facing is that no ...

cssangular

I'm having trouble figuring out how to activate the active state for a navigation bar

Having trouble changing the icons' state when they are clicked on. This navigation bar is being imported from different files. Here is my code for the navigation bar: .nav { position: fixed; top: 88%; left: 12.5%; right: 12.5%; width: 7 ...

htmlcss

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

javascriptjqueryhtmlcss

Ensure the vertical alignment of the error tooltip remains consistent regardless of the length of its content

I have been working on an error tooltip that appears when the user hovers over an input field. The tooltip is almost finished, but I am having trouble aligning it vertically with the input field. I have tried multiple solutions without success. Check it o ...

javascripthtmlcssprototypejs

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

I'm attempting to create a checkbox that, when selected, should also select everything else. I followed the code example provided in this tutorial for angular 2. However, I encountered an error: "ERROR TypeError: Cannot set property 'IS_CHECK&ap ...

htmlangulartypescript

Python Webscraping using Selenium

I'm experiencing difficulties webscraping the list of DAOs from masari.io due to some errors that I encountered: DeprecationWarning: executable_path has been deprecated, please pass in a Service object driver = webdriver.Chrome(options=options, exec ...

pythonhtmlseleniumweb-scrapingdynamic

How to showcase Twitter Track API on a website

const twitterRequest = twitter_oauth.post( "https://stream.twitter.com/1.1/statuses/filter.json?track=twitter", access_token, access_token_secret Hello, I have successfully implemented a track to display all the latest tweets containing the word "Twitter" ...

javascripthtmltwittertwitter-oauth

CSS: What's with the weird gray element appearing in Safari?

Does anyone have a solution for removing the grey layer (cf the image) in Safari? This issue does not occur in Chrome. The structure is as follows: <div class="class1"> <div class="class2"> <select> ... </selec ...

csssafari

How about utilizing background images rather than inline images for better mobile optimization through media queries?

After optimizing my website for mobile using media queries, I noticed that unnecessary images were still being downloaded even though they are hidden with CSS. This was causing the page loading times to slow down. To address this issue, I decided to repla ...

javascriptcssimagemobilemedia-queries

Having trouble hiding the hamburger menu depending on the screen width

I'm trying to figure out how to hide the hamburger menu when the screen width exceeds 400px. You can check out the site at damf.co Currently, the hamburger menu appears when the screen width is less than 400px. If you click on it and then expand the ...

javascriptjquerycss

I need to extract information from the database and save all entries from the form in order to send them to myself. This includes calculating the real-time multiplication of weight and pieces

For a project, I need to gather contact data from the client, and then populate a MySQL database with the information to create new rows in a table. There's an additional requirement where I have to calculate the total weight of element pieces multip ...

javascriptphphtml

Tips for transferring multiple inputs from one HTML page to another

I am working on an HTML page that requires inputs for datetime1, datetime2, and moteid. Upon clicking the submit button, the page should redirect to another page. I need to use the inputs provided on the previous page for datetime1, datetime2, and moteid. ...

htmljsp

Synchronize information between two drop-down lists

I am currently utilizing the boostrap library to create a pair of dropdown lists. My goal is to have the items in the second dropdown list dynamically update based on the selection made in the first dropdown. Within my code, there exists a dictionary name ...

javascripthtmlbootstrap-5

Vue.js Card displayDisplaying cards in a Vue

I've recently started diving into vue.js and I'm honing my skills with vuetify. I've been grappling with this layout for quite some time now but I seem to be stuck. Could someone please guide me through approaching this problem? I have an a ...

javascripthtmlcssvue.jsvuetify.js

Is there a way to automatically activate the "Add" button when I hit the enter key in the text box?

Being someone who relies on to-do lists, I implemented a system where you can input tasks into a textbox and click the add button to see them listed below. However, I found it cumbersome to keep clicking the add button every time I wanted to quickly add mu ...

javascripthtmlcss

Modify the `<link>` tag using the `onclick` function in JavaScript

I want to switch up the site's style with just a click on an icon <head> <meta charset="utf-8"> <link rel="stylesheet" href="styled.css" id="styles"> </head> Everytime I try to tackle th ...

javascripthtmlhyperlinkonclickhref

Utilize jQuery's each loop to individually choose objects

I've been attempting to assign a variable to uniquely represent an audio object for each class using the following code snippet: var x0 = new Audio('1.wav'); var x1 = new Audio('2.wav'); $('.class').each(function(i) { ...

javascriptjqueryhtmlhtml5-audio

Tips for preventing scrolling on iOS in Chrome or Safari using CSS, JavaScript, or jQuery

I've successfully implemented an input element with a click event listener that triggers a function to make another element visible using the CSS rule "display:block;". The element in question has the following styling rules: .elementExample { d ...

javascriptjquerycss