jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(flipbook): replicate StPageFlip CSS inside shadow DOM 

StPageFlip injects its CSS (.stf__parent, .stf__block, .stf__item, etc.)
into document.head, which doesn't penetrate shadow DOM boundaries.
Pages rendered but were unstyled — collapsed/invisible. Replicate the
required rules inside each component's shadow root styles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-22 18:27:56 -07:00
parent df8d5f79ce
commit 9ac8cb6256
2 changed files with 87 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
modules/rbooks/components/folk-book-reader.ts
View File

@ -367,6 +367,49 @@ export class FolkBookReader extends HTMLElement {
height: 100%;
min-height: calc(100vh - 52px);
background: var(--rs-bg-page);
}
/* StPageFlip CSS — injected to document.head but doesn't
penetrate shadow DOM, so replicated here. */
.stf__parent {
position: relative;
display: block;
box-sizing: border-box;
transform: translateZ(0);
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.stf__wrapper {
position: relative;
width: 100%;
box-sizing: border-box;
}
.stf__parent canvas {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.stf__block {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
perspective: 2000px;
}
.stf__item {
display: none;
position: absolute;
transform-style: preserve-3d;
}
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow {
position: absolute;
left: 0;
top: 0;
color: var(--rs-text-primary);
}

45
modules/rpubs/components/folk-pubs-flipbook.ts
View File

@ -269,7 +269,50 @@ export class FolkPubsFlipbook extends HTMLElement {
:host {
display: block;
position: relative;
z-index: 0; /* stacking context — keeps StPageFlip elements above backgrounds */
z-index: 0;
}
/* StPageFlip injects these into document.head, but they don't
penetrate shadow DOM — so we replicate them here. */
.stf__parent {
position: relative;
display: block;
box-sizing: border-box;
transform: translateZ(0);
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.stf__wrapper {
position: relative;
width: 100%;
box-sizing: border-box;
}
.stf__parent canvas {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.stf__block {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
perspective: 2000px;
}
.stf__item {
display: none;
position: absolute;
transform-style: preserve-3d;
}
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow {
position: absolute;
left: 0;
top: 0;
}
.loading {