Add resolveEl() for shadow DOM compatibility#1520
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1520 +/- ##
==========================================
- Coverage 68.98% 68.94% -0.05%
==========================================
Files 65 65
Lines 5556 5561 +5
Branches 1229 1233 +4
==========================================
+ Hits 3833 3834 +1
- Misses 1689 1693 +4
Partials 34 34 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Can you use But I do think we can update the types in options.js to allow either a selector or a domelement for el. There are two spots that will need to be updated to switch from .el to |
BookReader.el can be either a CSS selector string or a DOM Element. Several places in the codebase call document.querySelector(br.el), which fails when: - br.el is a DOM Element (not a string) - br.el is a selector like '#BookReader' but the element is inside a shadow DOM tree (querySelector can't cross shadow boundaries) Add BookReader.prototype.resolveEl() that handles both cases, and update mainBRContainer getter and search plugin to use it. This is needed for integrating BookReader into apps that use shadow DOM (e.g. offshoot, which wraps details-page in app-root's shadow root). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
f1c774e to
0b63878
Compare
|
Rebased onto current master (offshoot WEBDEV-8245 shipped today and is now using this patch stack downstream — re-ready for review when someone has a moment 🙏). |
Summary
BookReader.prototype.resolveEl()that handleselas either a DOM Element or CSS selector stringmainBRContainergetter in ia-bookreader to useresolveEl()renderModalMessageto useresolveEl()Problem
document.querySelector(br.el)fails when:br.elis a DOM Element (not a string) — throwsSyntaxError: '[object HTMLDivElement]' is not a valid selectorbr.elis a selector like#BookReaderbut the target element is inside a shadow DOM tree — returnsnullThis is needed for integrating BookReader into apps that use shadow DOM (e.g. offshoot, which wraps the details page inside
app-root's shadow root).Test plan
el: '#BookReader'(string selector, light DOM)el: document.getElementById('BookReader')(DOM element)mainBRContainerreturns the correct element in both modes🤖 Generated with Claude Code