Guide on implementing page styles to a polymer element

To apply styles from a 'normal' stylesheet to my polymer component, I included shim-shadowdom in the style and added /deep/ to the class. Here is an example:

<html>
  <head>
    <style shim-shadowdom>
      .mylink /deep/  {color: orange;}
    <style>
  </head>
  <body>
    <my-link></my-link>
  </body>
</html>

Then, for the component:

<polymer-element name="my-link">
   <a class="mylink" href="#">xxx</a>
</polymer-element>

This approach does not work properly in Chrome - the link still retains its default color. In Firefox and IE, the links turn orange, but they do so even without using /deep/ or shim-shadowdom.

The question at hand is: what am I missing here?

Polymer version being used is 0.5.5.

PS: Despite the styling issue, Polymer functions as expected - all components are displayed, AJAX requests are sent successfully, among other functionalities.

Answer №1

Make sure to utilize my-link /deep/ .mylink

Update: Don't forget to wrap the <a> within a <template> tag. Ensure that your element has been properly imported!

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

A guide on using jQuery to iterate through 3 separate div elements

Seeking assistance with creating a dynamic loop for multiple divs (3 or more) using jQuery. The desired outcome is to have the main image div on the homepage rotate with other divs, changing both the background image and links within each div. I initially ...

Ways to prevent the hover state from activating when the mouse is in the corner of a circular QPushButton

I'm working on customizing a QPushButton that has round corners: https://i.stack.imgur.com/g8zfs.png When the mouse hovers over the button, I want to change its style: https://i.stack.imgur.com/SDm79.png To achieve this, I utilized setStyleSheet f ...

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...

Seeking to duplicate script for a new table without making any changes to the original script

I am working with two tables that require the capability to dynamically add and delete rows using separate scripts. How can I modify the second script so that it only affects the second table and not the first one? Table: <table id="myTable" class=" t ...

Using AngularJS and the ng-show directive, you can set a <div> element to

Objective: My aim is to show the content of a div according to the status of checkboxes, while also ensuring that these divs are visible by default If I have this code snippet: <html> <head> <script src="https://ajax.googleapis.com/ajax/li ...

Concealing a Specific Element with Text using jQuery

Is there a way to conceal the section that includes the element labeled as "Product Tags" on a webpage? ...

Issue with AJAX show/hide causing scrolling to top

I've implemented ajax show hide functionality to display tabs, but whenever I scroll down to the tab and click on it, the page scrolls back to the top. You can check out the example code in this fiddle: http://jsfiddle.net/8dDat/1/ I've attempt ...

The CSS code conceals the icon within the background

Could someone please help me out? I am new to this and can't seem to figure out what's wrong. The phone icon seems to be hidden behind a white background. Everything else looks fine, but I really want the icon to be in the front with a border and ...

Tips for sending data from an HTML page to an Angular custom element

I have successfully created an angular custom element from an angular component that I would like to call from a standard HTML page. The custom element requires a parameter, which functions properly when called as a component within an angular project. Ho ...

extracting an empty value from this variable

When I click on an anchor tag using this operator, the value appears blank. I have multiple divs with the same class, so I used the .each() function, but I can't figure out where I'm going wrong. The desired output is that when I click on one of ...

Strange Vertical Offset Issue with Custom Fonts in CSS

I have implemented a custom font in my CSS using the following method: @font-face { font-family: 'Gabriola'; src: url('Gabriola.eot'); src: url('Gabriola.eot?#iefix') format('embedded-opentype'), ...

Transforming a horizontal list into a vertical one

What might be causing the message list to display horizontally in the admin dashboard, but vertically on other pages? .user-list{ display:inline; } .users header, .users-list a{ display: flex; align-items: center; padding-bottom: 20px; border-bottom: 1px s ...

Create a layout with a single column that features a dynamic image, paired with another column housed within a modal using Bootstrap

I'm facing a design issue with a row that has two columns - one with an image and the other with a list of users in a modal window. As more users are loaded when scrolling down the modal, I want the image to remain fixed in its position. Here's t ...

I'm having trouble setting the margin to 0 in Bootstrap 4. I'm only using CSS for styling and JavaScript for

Currently in the process of setting up a grid layout for a webpage under development. Encountering an issue with the .container class, that is supposed to contain all my div elements, not having any margin. Managed to remove the margin on the left side usi ...

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...

Map on leaflet not showing up

I followed the tutorial at http://leafletjs.com/examples/quick-start/ as instructed. After downloading the css and js files to my local directory, I expected to see a map but all I get is a gray background. Can anyone advise me on what might be missing? T ...

Cease the use of the jQuery.css() method

Does anyone know how to halt the jQuery css() function? I've successfully used the jQuery.stop() function to pause the animate() function, but I'm unsure about stopping css(). Any help is appreciated. Thanks! ...

CSS grid tracks remain fixed in size while other tracks expand

Why won't the grid track cells dynamically shrink when other cells are enlarged in the following code? In this snippet, hovering over any track section causes that cell to grow to 75% of the viewpoint. However, instead of the other sections shrinking ...

What could be causing the error in this code's output?

Being new to PHP programming, I encountered an issue while trying inputting an HTML tag into a PHP file. This snippet generated an error: <?php $a = "Begin"; $b = 12; echo $b . " " . $a . " " . "This is a PHP file <br/>"; echo strlen($a); echo s ...

Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

I have an SVG diagram with some yellow points represented as circles. <html> <title>Yellow circles</title> <body> <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" ...