--- a/devtools/client/inspector/markup/views/read-only-editor.js
+++ b/devtools/client/inspector/markup/views/read-only-editor.js
@@ -15,16 +15,18 @@ function ReadOnlyEditor(container, node)
   this.buildMarkup();
 
   if (node.isPseudoElement) {
     this.tag.classList.add("theme-fg-color5");
     this.tag.textContent = node.isBeforePseudoElement ? "::before" : "::after";
   } else if (node.nodeType == nodeConstants.DOCUMENT_TYPE_NODE) {
     this.elt.classList.add("comment", "doctype");
     this.tag.textContent = node.doctypeString;
+  } else if (node.isShadowRoot) {
+    this.tag.textContent = "#shadow-root";
   } else {
     this.tag.textContent = node.nodeName;
   }
 
   // Make the "tag" part of this editor focusable.
   this.tag.setAttribute("tabindex", "-1");
 }
 

--- a/devtools/server/actors/inspector/node.js
+++ b/devtools/server/actors/inspector/node.js
@@ -110,16 +110,17 @@ const NodeActor = protocol.ActorClassWit
 
       attrs: this.writeAttrs(),
       isBeforePseudoElement: this.isBeforePseudoElement,
       isAfterPseudoElement: this.isAfterPseudoElement,
       isAnonymous: isAnonymous(this.rawNode),
       isNativeAnonymous: isNativeAnonymous(this.rawNode),
       isXBLAnonymous: isXBLAnonymous(this.rawNode),
       isShadowAnonymous: isShadowAnonymous(this.rawNode),
+      isShadowRoot: this.isShadowRoot,
       pseudoClassLocks: this.writePseudoClassLocks(),
 
       isDisplayed: this.isDisplayed,
       isInHTMLDocument: this.rawNode.ownerDocument &&
         this.rawNode.ownerDocument.contentType === "text/html",
       hasEventListeners: this._hasEventListeners,
     };
 
@@ -170,16 +171,21 @@ const NodeActor = protocol.ActorClassWit
   get isBeforePseudoElement() {
     return this.rawNode.nodeName === "_moz_generated_content_before";
   },
 
   get isAfterPseudoElement() {
     return this.rawNode.nodeName === "_moz_generated_content_after";
   },
 
+  get isShadowRoot() {
+    let isFragment = this.rawNode.nodeType === Ci.nsIDOMNode.DOCUMENT_FRAGMENT_NODE;
+    return isFragment && this.rawNode.host;
+  },
+
   // Estimate the number of children that the walker will return without making
   // a call to children() if possible.
   get numChildren() {
     // For pseudo elements, childNodes.length returns 1, but the walker
     // will return 0.
     if (this.isBeforePseudoElement || this.isAfterPseudoElement) {
       return 0;
     }

--- a/devtools/shared/fronts/node.js
+++ b/devtools/shared/fronts/node.js
@@ -290,16 +290,20 @@ const NodeFront = FrontClassWithSpec(nod
   get tagName() {
     return this.nodeType === nodeConstants.ELEMENT_NODE ? this.nodeName : null;
   },
 
   get isDocumentElement() {
     return !!this._form.isDocumentElement;
   },
 
+  get isShadowRoot() {
+    return this._form.isShadowRoot;
+  },
+
   // doctype properties
   get name() {
     return this._form.name;
   },
   get publicId() {
     return this._form.publicId;
   },
   get systemId() {