Setting css styles for a p element in my application is affecting the p element inside a lit-element in IE11 only.
I have setup a very basic stackblitz example to show the issue. When you open this in IE11 you will notice the custom element p text is italic, that style is coming from outside. In other browsers, this does not happen.
Is this a known issue and can't be prevented for IE11? Or is there a way I can work around this?
I have reproduced the problem on my side, it can be possible that it is the IE browser default behavior. Because the outside CSS style is global style.
As a workaround, you could change your selectors to stop them matching the elements you don't want them to match. Such as the following sample (using a class selector to add CSS style):
Code in the index.html page:
<style>
.outer-p { font-style: italic; }
</style>
</head>
<body>
<p class="outer-p">Text outside element</p>
<my-element></my-element>
</body>
Code in the custom element (my-element.js)
class MyElement extends LitElement {
static get styles() {
return css`
.inner-p { display:block; font-weight: 900; color: #ff9900; }
`;
}
render() {
return html`
<p class="inner-p">Hello world! From my-element</p>
`;
}
}
Related
I have a react component that will be embedded into an old website. The problem is that this website has some global styles with tag selectors, e.g:
p {
font-size: 14px;
}
Removing these styles from the website is not an option.
So is there any way I can prevent these styles from reaching my component apart from just overriding them?
Create a particular css file for this component and again assign the style for p in this page particularly. It will replace the global one.
OR
You can use inline css because it has more preference than the external css.
You could wrap your .p inside your own class.
Example in plain HTML:
<div class = "you-wrapper">
...
...
...
<p></p>
...
</div>
And in you react code, add your own css:
.you-wrapper p { font-size: 15px; color:red;}
Edited:
/* your css */
.your-wrapper * { all: unset; }
.you-wrapper p { font-size: 15px; color:red;}
I have a web component that renders the following in the shadow dom:
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
</div>
...
</custom-banner>
To style the headertext, the following css works great:
custom-banner::part(headertext) {
border: 5px solid green;
}
Now say I have something like this:
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
<span>I am the subheader text!</span>
</div>
...
</custom-banner>
Is there a way to target the children of a shadow part? That is, something like this (which doesn't seem to work):
custom-banner::part(headertext) span {
border: 5px solid red;
}
I realize that this sort of thing might undercut the whole purpose of ::part, but maybe not?
To be clear, the subheader span is not a slotted child in this example. It is always part of the component and it is in the shadow dom. The examples above are meant to be the rendered component, in browser.
Thanks!
Alas, you can only style the ::part Node itself.
Not children, that would defeat the ::part purpose,
might as well allow all shadowDOM styling from the outside then. (can't be done)
You can specify a part="subheader",
or you could use a CSS property, scoped to the part, see --subheader: blue
good blogs:
Why is my shadowDOM inheriting styles
::parts by Monica Dinculescu (Google): https://meowni.ca/posts/part-theme-explainer/
<style>
body {
/* note how 'inheritable styles' do style shadowDOM */
font: 28px Arial;
color: green;
}
custom-banner::part(headertext) {
/* style shadowDOM from global CSS */
background: pink;
--subheader: blue;
}
</style>
<custom-banner></custom-banner>
<script>
customElements.define("custom-banner", class extends HTMLElement {
constructor() {
super()
.attachShadow({mode:"open"})
.innerHTML = `<style> span { color:var(--subheader) } </style>` +
`<div part="headertext">I am the header text!` +
`<span>I am the subheader text!</span>` +
`</div>`;
}
});
</script>
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
My main HTML formatting is controlled by the
<P>
tag.
My application is dynamically constructed HTML using HTML fragments stored in a database, and block of text are encapsulated in tags, and thus pick up the default CSS styling for the tags. However sometimes erroneous extra tags get inserted like tags which will then negate the styling. The problem is that these extra tags could be anything, so it is difficult to construct a rule for every scenario. So what I need is a CSS rule that will apply to any text within it regardless of other existent tags.
So normal situation:
<style>
p {font-family:arial}
</style>
<p>this would render as arial</p>
<p><span>problems here</span></p>
<p><span style="font-family:calibri">problems here definitely, need to have paragraph rules imposed here ie overrule span font rule</span></p>
So I would like to know how I can get the paragraph CSS rule to overrule all child tag css rules.
Possible?
Thanks in advance.
/* Any tag inside p */
p * {
font-family: Arial !important;
}
If you know specific tag, like span, then
p span {
font-family: Arial !important;
}
inheritvalue reference
Test page
This has the advantage that it will inherit any font properties which are set by the parent element thus p. The !important is only needed when it concerns inline styles to be able to overide it.
All properties
p * {
font: inherit !important;
}
Or specifically one property
p * {
font-family: inherit !important;
}
Try this;
p {
font-family: arial;
}
p * {
font-family: inherit !important;
}
jsFiddle
NOTE: IE 7 or minor versions do not support inherit value
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id="container">
<form>
<div class="sub">Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, #Lea Verou!)
Edit 3: default was renamed to revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}