diff --git a/src/codecs/html/__file_snapshots__/article-math.html b/src/codecs/html/__file_snapshots__/article-math.html
index f12710a4b..30ea15f0f 100644
--- a/src/codecs/html/__file_snapshots__/article-math.html
+++ b/src/codecs/html/__file_snapshots__/article-math.html
@@ -1,4 +1,4 @@
-<article itemscope="" itemtype="http://schema.org/Article">
+<article itemscope="" itemtype="http://schema.org/Article" data-itemscope="root">
   <div itemscope="" itemtype="http://schema.org/Organization" itemprop="publisher">
     <meta itemprop="name" content="Unknown">
     <div itemscope="" itemtype="http://schema.org/ImageObject" itemprop="logo">
diff --git a/src/codecs/html/__file_snapshots__/elife-50356.html b/src/codecs/html/__file_snapshots__/elife-50356.html
index f552b834c..c43d570ec 100644
--- a/src/codecs/html/__file_snapshots__/elife-50356.html
+++ b/src/codecs/html/__file_snapshots__/elife-50356.html
@@ -1,4 +1,4 @@
-<article itemscope="" itemtype="http://schema.org/Article">
+<article itemscope="" itemtype="http://schema.org/Article" data-itemscope="root">
   <div itemscope="" itemtype="http://schema.org/Organization" itemprop="publisher">
     <meta itemprop="name" content="Unknown">
     <div itemscope="" itemtype="http://schema.org/ImageObject" itemprop="logo">
diff --git a/src/codecs/html/__file_snapshots__/kitchen-sink.html b/src/codecs/html/__file_snapshots__/kitchen-sink.html
index 8c3918789..24f140683 100644
--- a/src/codecs/html/__file_snapshots__/kitchen-sink.html
+++ b/src/codecs/html/__file_snapshots__/kitchen-sink.html
@@ -1,4 +1,4 @@
-<article itemscope="" itemtype="http://schema.org/Article">
+<article itemscope="" itemtype="http://schema.org/Article" data-itemscope="root">
   <div itemscope="" itemtype="http://schema.org/Organization" itemprop="publisher">
     <meta itemprop="name" content="Unknown">
     <div itemscope="" itemtype="http://schema.org/ImageObject" itemprop="logo">
diff --git a/src/codecs/html/index.ts b/src/codecs/html/index.ts
index 411510aa8..f6d5ddb4d 100644
--- a/src/codecs/html/index.ts
+++ b/src/codecs/html/index.ts
@@ -234,9 +234,13 @@ export class HTMLCodec extends Codec implements Codec {
   }
 
   /**
-   * Encode a `stencila.Node` to a `VFile` with HTML contents.
+   * Encode a Stencila `Node` to a `VFile` with HTML contents.
    *
-   * @param node The `stencila.Node` to encode. Will be mutated to an `Node`.
+   * The attribute `data-itemscope="root"` is added to the root node
+   * of the encoded HTML. This attribute can be used to scope CSS variables
+   * to within the top-level Stencila Node.
+   *
+   * @param node The `Node` to encode.
    * @returns A promise that resolves to a `VFile`
    */
   public readonly encode = async (
@@ -259,12 +263,13 @@ export class HTMLCodec extends Codec implements Codec {
     const nodeToEncode = isBundle
       ? await bundle(node)
       : await toFiles(node, filePath, ['data', 'file'])
-    let dom: HTMLHtmlElement = encodeNode(nodeToEncode) as HTMLHtmlElement
+
+    let dom = encodeNode(nodeToEncode) as HTMLElement
+    dom.setAttribute('data-itemscope', 'root')
 
     const mathjaxCss = await mathJaxFinish()
 
     if (isStandalone) {
-      const nodeToEncode = isBundle ? await bundle(node) : node
       const { title = 'Untitled' } = getArticleMetaData(nodeToEncode)
       dom = await generateHtmlElement(
         stringifyContent(title),