I'm looking for a way to replace ::shadow now that it is gone. I've found two topics about it on this website, but both imply to modify the shadow element.
here and there
But the point of Web Components is to be able to import any element we found on the Internet in our webpage / app. So, it means that I don't wanna modify anything on these "third parties elements", because there are sources, and if I modify them, it will be overwritten when I later update them.
So, imagine that I download on webcomponents.org an element that creates some sort of button, but I need to change the color of this button because it doesn't fit the style of my page/app. The element creator has put no variable in his CSS, no #apply rule, no imports, nothing. Just the polymer element itself, working properly.
How can I do this without modifying the element's source code?
One option would be to style it imperatively. Get a reference to the element, use the DOM API on it to query its shadow DOM for the inner element you want to modify, then set the style property of that reference.
For example, the <gold-cc-cvc-input> currently has no extension points for styling its credit card icon.
Right-click the icon in Chrome, and inspect it in DevTools. We see the icon has an id of "icon".
Get a reference to <gold-cc-cvc-input id="cvc">, and set the style of the "icon" element. Here, we're using Polymer's automatic node finding to get a reference to the <gold-cc-cvc-input> by its ID (i.e., this.$.cvc) and then a reference to the inner "icon" element (i.e., this.$.cvc.$.icon).
this.$.cvc.$.icon.style.border = 'solid 2px blue';
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
attached: function() {
this.$.cvc.$.icon.style.border = 'solid 2px blue';
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="gold-cc-cvc-input/gold-cc-cvc-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<gold-cc-cvc-input id="cvc"></gold-cc-cvc-input>
</template>
</dom-module>
</body>
codepen
You can style it from your container element, just look at the structure of the 3rd parties element. E.g.<paper-card> is the element you whant to style. paper-cards have divs inside:
shady DOM (Polymer 1.*)
<style>
paper-card div{
background-color: red;
padding: 30px;
}
</style>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-card/paper-card.html">
<style>
.thirdPartEl div{
background-color: red;
padding: 30px;
}
</style>
</head>
<body>
<paper-card heading="I'm unstyled 3rd parties element"></paper-card>
<paper-card class="thirdPartEl" heading="I'm styled 3rd parties element"></paper-card>
</body>
shadow DOM (Polymer 2.0)
for styling element from outside just use tag name as selector
<style>
paper-card{
background-color: red;
padding: 30px;
}
</style>
but if you want to style internals, you need custom CSS properties. if these aren't set, you can style them imho only via js at the moment
Related
I did just want to answer a question and I fall on something I dont understand!
Why the result is not the same if I use inline CSS or CSS in a file like the color in this case!
The code is the same but the 1st paragraph is green and the 2nd red!
I really dont understand why?
Thank you
<head>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
</head>
<body>
<p>This a paragraph.</p>
</body>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
<body>
<p>This a paragraph.</p>
</body>
If you copy your first snippet into a file and open it in a browser the paragraph is indeed red as in the second example.
But for some strange reason* if you run the first snippet in stackoverflow the style element is moved into the body element before the p element (just introspect with firebug). Now p is not the first child and therefore the red-color rule does not apply.
*EDIT: or not that strange (see comment by Turnip) since the body tag is stripped from the script.
p:first-child will only render on the first child if it is a p tag. For whatever reason, the StackOverflow snippet is rendering the code as:
<head>
<style>
</style>
<style type="text/css"></style></head>
<body>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
<p>This a paragraph.</p>
</body>
</html>
The first child is the <style> tag, which got moved into the body. Because of this, there is no p:first-child and so the color red never renders, this leaves green as the only style applied to the <p> tag.
While there is an exception for the :not() pseudoclass in the CSS Specificity Rules that determine when specific CSS styles are applied to certain elements, the real issue here is a matter of invalid markup.
The first example that you provided is actually invalid as <style> blocks must be declared within the <head> element according to the spec, and you'll notice when this is corrected the results should be the same:
Doh! Or it's just a matter of Stack Overflow's editor stripping out the <body> tags within the code examples per the comment from Turnip.
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I am using Bootstrap CSS on my site and am loading in the <head> element. Just below I load the boostrap I have a <style> element where I am trying to override some CSS from the bootstrap, but it is not overriding it when I look at the Chrome Dev Inspector. I thought elements in element should cascade the previous ?
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Women's Transit</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />
<style type="text/css">
/* Global elements */
input {
height:30px;
padding:8px;
}
</style>
</head>
You probably want !important.
input {
height: 30px !important;
padding: 8px !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.
Important:
When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.
So !important is the easiest way to override styles, because it is more "specific" than other styles. Please note that overriding styles is very bad practice, especially with !important.
The actual solution: Don't override styles.
The internal or embedded style you created would have a higher "order of importance" than Bootstrap's and cascade over their styles ONLY if the same selector was used in Bootstrap's sheet with the same weight and selectivity. That's not likely the case because they use classes to modify most styles. The "input" element has a weight of 1, so if they use classes with those properties they would easily cascade over your element style (a plain class generally has a weight of 10).
Bootstrap does use an "input" style in their reboot element style sheet, so your sheet would likely cascade over that one style. But I don't see them changing height or padding there so your styles would apply until their custom class changes its property styles further. In addition, their input style changes things you don't, like "margin" and "line-height" which might be affecting your layout further.
My advice is to NOT use "input" or "!important" and instead create a custom class and add the class to your element. Make it more selective than Bootstrap's with a full set of properties so you cascade over Bootstrap's input and class styles but inherit some things you like. This gives you full control now over what you like and don't like in Bootstrap:
body form .myinput{
width:100px
height: 30px;
padding: 8px;
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
<input class="myinput ..." />
The downfall of most young web developers with CSS is they do not add enough style properties to their styles and rely on either inherited or unknown changes to be cascading down into their elements. Adding a full set of properties gives you total control over how that element looks and what it inherits.
The mystery is gone :)
Specifaclly I just want to change this header by giving it's own, color, font, size, weight.etc
<div id="header">
<a href="google.com">
<h1>
<li>EXAMPLE LINK</li>
</h1>
</div>
Firstly, there are several errors in your HTML, which should be fixed first:
<div id="header">
<!-- needs a closing </a> tag and some text, as well as a full href -->
<!-- what is your reason for using an LI element here? -->
<h1><li>EXAMPLE LINK</li></h1>
</div>
As far as styling, you can use CSS, like so:
h1 {
color: red;
font-size: 5em;
text-decoration: underline;
}
/* etc. */
Search Google for basic CSS tutorials. Once you've decided which styles you would like to apply, simply save your text document as something like "style.css", and add a LINK element to the header of your HTML file (this will allow you to use it as an external stylesheet.):
<head>
<link rel="stylesheet" href="style.css" />
</head>
There are other methods for applying styles, such as inline styling, etc., but the above is one of the more typical ways of going about doing it.
Here are some resources to get you started:
w3schools CSS tutorial
CSS-Tricks
How to apply stylesheets
Here is a jsfiddle
You specify a stylesheet with:
<link href="<path>/site.css" rel="stylesheet" type="text/css" />
where <path> is the path to the stylesheet and Site.css is the name of your stylesheet. This is normally in <head>.
You do this either with an inline style or a style section in your page or in a style file.
I wasn't sure if you wanted to format the a as well. Also, I wasn't sure if you want to style the header div or h1. If you want to style h1, then replace #header with h1 in css.
We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).