Reputation: 79
<curie-image id="DynamicImage1">
#shadow-root
<img alt="No Image" style="width:100%;height:100%" src="data:image;base64, ...">
</curie-image>
I am trying to access the img
element above to set its object-fit
attribute. I do not have access to the underlying JavaScript, so cannot set the part
attribute of the shadow root's children, and so Styling children of shadow dom ::part element will not work in my case. Also, I believe using the :host()
selector will not work in this case, as the selector needs to be "evaluated in the context of a shadow tree" in order to work.
Given these constraints, is there any CSS selector which will select a child of my shadow root, from a context outside of the shadow root?
For some reason, a simple selector for img
in the global CSS file does select the img
element in this shadow root, even though it supposedly should match all such elements, even if they are within a shadow root - see CSS and resulting style below (note that the object-fit
attribute has not been set for the img
element).
...
img {
object-fit: none;
}
Upvotes: 4
Views: 3910
Reputation: 21301
Since it is an open shadowRoot, you have JavaScript access with
.querySelector("curie-image").shadowRoot.querySelector("img").style.objectFit="none"
But that is ductaping styles.
You could dive into all IMGs with:
(will not dive into closed
shadowRoots)
const shadowDive = (
el,
selector,
match = (el, root) => {
if(root.localName == "curie-image"){
el.style.ObjectFit="none";
}
},
root = el.shadowRoot || el
) => {
root.querySelector(selector) && match(root.querySelector(selector), root);
[...root.querySelectorAll("*")].map(el => shadowDive(el, selector, match));
}
shadowDive(document.body, 'img[style]' );
disclaimer: untested code snippet
Preferable you will want to change the curie-image
source code and introduce HTML <slot>
and CSS ::part
(you can also dynamically wack on with JS)
Web Components can do Client Side, what no Framework can with a Component:
customElements.define( "curied-image" ,
class extends customElements.get("curie-image") {
connectedCallback(){
super.connectedCallback(); // call original <curie-image> connectedCallback
// now do what you want with 'this' <curied-image> Web Component here
}
});
See my Dev.To posts:
note: You can extend closed
Web Components; but you can still not access its shadowRoot.
Upvotes: 1