fix(core/title): detect id="title" collision and use fallback

src/core/title.js

@@ -51,7 +51,18 @@ export function run(conf) {
   }
 
   // Decorate the spec title
-  if (!h1Elem.id) h1Elem.id = "title";
+  if (!h1Elem.id) {
+    const existing = document.getElementById("title");
+    if (existing && existing !== h1Elem) {
+      const msg =
+        'Another element already uses `id="title"`. ' +
+        "The spec's `<h1>` will use a different id to avoid a collision.";
+      showError(msg, name, { elements: [existing] });
+      h1Elem.id = "document-title";
+    } else {
+      h1Elem.id = "title";
+    }
+  }
   h1Elem.classList.add("title");
 
   setDocumentTitle(conf, h1Elem);

tests/spec/core/title-spec.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import {
+  flushIframes,
+  makeDefaultBody,
+  makeRSDoc,
+  makeStandardOps,
+} from "../SpecHelper.js";
+
+describe("Core — Title", () => {
+  afterAll(flushIframes);
+
+  it("uses id='document-title' when another element already uses id='title'", async () => {
+    const body = `
+      <span id="title">not the title</span>
+      <h1>My Spec Title</h1>
+      ${makeDefaultBody()}
+    `;
+    const ops = makeStandardOps(null, body);
+    const doc = await makeRSDoc(ops);
+
+    // The h1 should fall back to id="document-title"
+    const h1 = doc.querySelector("h1.title");
+    expect(h1).toBeTruthy();
+    expect(h1.id).toBe("document-title");
+
+    // The original id="title" element should still exist
+    const original = doc.getElementById("title");
+    expect(original).toBeTruthy();
+    expect(original.localName).toBe("span");
+
+    // An error should have been shown
+    const errors = doc.respec.errors.filter(
+      err => err.plugin === "core/title"
+    );
+    expect(errors).toHaveSize(1);
+    expect(errors[0].message).toContain('id="title"');
+  });
+
+  it("uses id='title' normally when there is no collision", async () => {
+    const body = `
+      <h1 id="title">My Spec Title</h1>
+      ${makeDefaultBody()}
+    `;
+    const ops = makeStandardOps(null, body);
+    const doc = await makeRSDoc(ops);
+
+    const h1 = doc.querySelector("h1#title");
+    expect(h1).toBeTruthy();
+    expect(h1.id).toBe("title");
+
+    const errors = doc.respec.errors.filter(
+      err => err.plugin === "core/title"
+    );
+    expect(errors).toHaveSize(0);
+  });
+});