Use the Shadow DOM for required HTML and CSS. #38
Conversation
|
This was supposed to be a draft! |
| function getShadowHost(el: HTMLElement) { | ||
| const rootNode = el.getRootNode() | ||
| if (!(rootNode instanceof ShadowRoot)) return el | ||
| return rootNode.host | ||
| } |
There was a problem hiding this comment.
It would be good if we could avoid this function, but I haven't been able to find an alternative that allows me to access the Shadow DOM host. Open to ideas; otherwise, we can keep this as-is for now.
There was a problem hiding this comment.
You could inline it with something like el.getRootNode()?.host ?? el
I don't foresee a lot of problems with integrating this change. I am mostly expecting browser support and compatibility issues, but I've done some due diligence with browsers, and the default behavior seems to work fine to me.
Systems that do customize the HTML that now exists in the Shadow DOM will have issues, but I want to ship this change and gather feedback to see if there are issues we need addressing. I'm assuming that most applications use the provided CSS. If this turns out to be an issue, other applications can stay on the previous version while working on solutions. We can probably solve some of them using the
Excellent shout; I'll add these new restrictions to the README. |
I spoke too soon; we are customizing the CSS on github.com. 😂 |
|
github.com adds custom CSS to round the crop mask. I feel like this is still something that the component can provide, so I added a |
This PR creates a Shadow DOM for
<image-crop>.I moved the required HTML structure and all the CSS necessary for the component into the Shadow DOM. This change means that consumers don't need to integrate the CSS when they want to use this component.
This change doesn't change functionality in any way but will be a breaking change since we have deleted the required CSS file, and consumers of the element no longer need to reference it.
References
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
https://developer.mozilla.org/en-US/docs/Web/CSS/:host()
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted