I am trying to extend the Polymer core-selector but it doesn't render on the webpage.
When I place <shadow></shadow> inside the template-tags it does render.
I don't know for sure if that is the real problem. What is the purpose of the shadow-tags? I don't find information about that in the API documentation.
Here is the link to an example: http://jsbin.com/qucitiwe/3/edit?html,console
You can find some information on how to extend elements in the Extending other elements section of the Polymer documentation.
The shadow element renders the shadow DOM of the parent element (the DOM inside the parent's template element) at this exact location. So without the shadow element you won't see any DOM from the parent element.
In addition, a child element can wrap the parent's shadow DOM with its own content, for example:
<template>
<div>Title</div>
<shadow></shadow>
<div>Footer</div>
</template>
Related
Wondering if it's possible to style the shadow root container? I have these attached to a parent custom element, and would like the custom element to always carry a margin: 5px.
Instead of adding this to the document's CSS, I would like to encapsulate this into the template attached to the component. But shadow root isn't quite an HTMLElement, so is the only way to add a <div> inside the template that acts as the container, and style that <div> instead?
The closest thing is probably using the :host CSS selector. Using :root inside the shadow DOM does not get to a document as there is none inside the shadow DOM, and the selector is not allowed to ascend out of the shadow DOM encapsulation.
Hint: if your host doesn't have display: inline-block it may not apply background or border as you expected.
I created an web-component with shadow mode 'open', which is used like this:
<scu-switch checked="true" value="switch1">
<span id="scu-switch-label">Switch On</span>
</scu-switch>
and looks like this:
Than I added the button to a webpage with the following global CSS:
text-align: center;
and now the button style is broken:
When I inspect the button I can see, that the global style was applied to the span (and notice that it is not part of slot content) inside of the shadow root.
The shadow DOM is supposed to isolate style from the rest of the web page.
Why was this text-align: center applied here, even though it was defined outside of the Shadow DOM?
One of the great features of the Shadow DOM in Web Components is that styles are encapsulated to the component - you can style your component without worrying about any specifier (id, class, etc.) conflicts or styles 'leaking out' to other elements on the page.
This often leads to the belief that the reverse is true - that styles outside of the component won't cross the Shadow boundary and 'leak in' to your component. However this is only partly true.
While specifiers do not leak in to your component (e.g. a color applied to an p element in a style rule outside of your component won't effect any p elements in your Shadow DOM, although the rule will be applied to your Light DOM, or slotted content),
inheritable styles applied to any elements containing your component will be applied to both your Shadow and Light DOM.
Source: https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
I have css from parent application that I want to use inside a web-component made by shadow dom. I don't want to copy css from parent aplication to web-component, but right now, the web-component can't see the parent application css, how can I do that?
parent app:
<style>
.pretty-button {
color: green
}
</style>
<body>
<button class="pretty-button">Got It</button>
<custom-element></custom-element>
</body>
web-component made by shadow dom:
<!--doesn't work because the shadow dom can't use parent css class-->
<body>
<button class="pretty-button">Got it from shadow dom</button>
</body>
Shadow DOM is protected from outside CSS. This is by design.
TL;DR:
If you want the outside CSS to affect DOM inside the shadowRoot of a custom element then you need to either:
Use a <slot> or
Copy the CSS into the shadowDOM
Here are three answers I have given on similar questions:
I have an element that i have declared as a shadow dom but the style is affecting the other elelemts
Why does my Web Component CSS not show? I am not using shadowDOM
slot selector limit in webcomponent
I've just started learning about Polymer custom elements.
I've created a very simple custom element, the usage of which is as follows:
<my_custom_element></my_custom_element>
The template for the custom element is:
<template>
<span>Hello</span>
</template>
If I inspect the DOM using Chrome Dev tools, I notice that my_custom_element tag appears in the DOM. I wasn't expecting this. I was expecting that this tag would be replaced by the template content. What does my_custom_element represent in its own right?
I also read that :host can be used to style a custom element internally from within its definition and it's used to style host element itself. But again I don't understand what it means to style the host element in its own right. Isn't the host element defined by its template content?
The web components model does not use <my-custom-element> as a placeholder, but as an actual and real HTML element with complex behaviors and its own contents.
I am trying to wrap my head around the light DOM and shadow DOM concepts.
What I am figuring out to do here is how to move the light dom part, inside the shadow dom so it does not get styled by the .foo selector...
I got this
<polymer-element name="my-element" constructor="" attributes="" noscript>
<template>
- <content></content> -
</template>
</polymer-element>
And my element is used like so:
<my-element>
<div class="foo">Shadow</div>
</my-element>
Now what I understand is that the div inside my-element gets tossed into the light dom (And gets styled by .foo), and <my-element></my-element> is what gets put inside the shadow DOM.
But, how can I put the div inside the shadow dom as well? (in effect hiding it from .foo)
example:
https://jsfiddle.net/mLT5G/52/
edit: A more real world example would be something along the lines of
<cards>
<card>
<h3>Title</h3>
<p>Body</p>
<card>
<cards>
From what I understand now, in essence I would be making 2 custom components here.
So, one for cards, which imports card
However the H3 and P will always take on the default styling of the page it's been put into? (If not overridden...)
Would I need to make another custom component? So instead of the H3 I create card-title and the p would be inserted by <content></content>
I realise I can do it like that, but I am wondering if that is the way to go.
You could use the ::content selector to try to override any styles that the page may have applied: http://jsbin.com/muyapu/2/edit
Or you could use the new all property to reset styles, however it's only supported in Chrome and Firefox. http://jsbin.com/daxaf/2/edit