Use Shadow DOM

README.md

@@ -51,8 +51,7 @@ The repo also includes a still higher level reader, though strictly speaking, `r
 ### Basic Usage
 
 ```js
-import { View } from './view.js'
-customElements.define('foliate-view', View)
+import from './view.js'
 
 const view = document.createElement('foliate-view')
 document.body.append(view)
@@ -154,7 +153,15 @@ The paginator uses the same pagination strategy as [Epub.js](https://github.com/
 
 To simplify things, it has a totally separate renderer for fixed layout books. As such there's no support for mixed layout books.
 
-Both renderers has the style class `.foliate-filter`, which you can apply CSS filters to, to e.g. invert colors or adjust brightness. By using this class, you can apply filters only to the book itself, leaving overlaid elements such as highlights unaffected.
+Both renderers have the [`part`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part) named `filter`, which you can apply CSS filters to, to e.g. invert colors or adjust brightness:
+
+```css
+foliate-view::part(filter) {
+    filter: invert(1) hue-rotate(180deg);
+}
+```
+
+The filter only applies to the book itself, leaving overlaid elements such as highlights unaffected.
 
 ### The Paginator
 
@@ -165,24 +172,14 @@ The layout can be configured from the `.layout` object, which has the following
 - `.maxColumnWidth`: number, in pixels. The maximum width of the text in each column.
 - `.maxColumns`: integer. The maximum number of columns. Has no effect in scrolled mode.
 
-It has built-in header and footer regions accessible via the `.heads` and `.feet` properties of the paginator instance. These can be used to display running heads and reading progress. They are only available in paginated mode, and there will be one element for each column. They are contained in parent divs that have the style classes `.foliate-header` and `.foliate-footer` respectively. These don't have any styles by default, but you will probably want to set something like the following:
+It has built-in header and footer regions accessible via the `.heads` and `.feet` properties of the paginator instance. These can be used to display running heads and reading progress. They are only available in paginated mode, and there will be one element for each column. They are styleable with `::part(head)` and `::part(foot)`. E.g., to add a border under the running heads,
 
 ```css
-.foliate-header > *, .foliate-footer > * {
-    display: flex;
-    min-width: 0;
-    align-items: center;
-    text-align: center;
-    font-size: .75em;
-    opacity: .6;
+foliate-view::part(head) {
+    padding-bottom: 4px;
+    border-bottom: 1px solid graytext;
 }
-.foliate-header > * > *, .foliate-footer > * > * {
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-```
+``
 
 ### EPUB CFI