diff --git a/src/ace_test.js b/src/ace_test.js
index af65146019b..fa9462e01e8 100644
--- a/src/ace_test.js
+++ b/src/ace_test.js
@@ -101,6 +101,20 @@ module.exports = {
 
         ace.config.set("useStrictCSP", false);
         assert.ok(getStyleNode());
+    },
+    "test: edit template" : function() {
+        var template = document.createElement("template");
+        var div = document.createElement("div");
+        template.content = document.createDocumentFragment();
+        template.content.appendChild(div);
+        var fragment = template.content.cloneNode(true);
+        var el = fragment.firstChild;
+        //emulating template content document fragment behaviour in browser
+        //which cause #4634 issue (virtual Document that doesn't have `documentElement`)
+        el.ownerDocument = {};
+        var editor = ace.edit(el);
+        assert.equal(editor.container, el);
+        editor.destroy();
     }
 };
 
diff --git a/src/lib/dom.js b/src/lib/dom.js
index 26ae1f6e2e1..fc3125fa490 100644
--- a/src/lib/dom.js
+++ b/src/lib/dom.js
@@ -217,7 +217,7 @@ exports.importCssString = importCssString;
 exports.importCssStylsheet = function(uri, doc) {
     exports.buildDom(["link", {rel: "stylesheet", href: uri}], exports.getDocumentHead(doc));
 };
-exports.scrollbarWidth = function(document) {
+exports.scrollbarWidth = function(doc) {
     var inner = exports.createElement("ace_inner");
     inner.style.width = "100%";
     inner.style.minWidth = "0px";
@@ -237,7 +237,9 @@ exports.scrollbarWidth = function(document) {
 
     outer.appendChild(inner);
 
-    var body = document.documentElement;
+    var body = (doc && doc.documentElement) || (document && document.documentElement);
+    if (!body) return 0;
+
     body.appendChild(outer);
 
     var noScrollbar = inner.offsetWidth;
@@ -245,13 +247,13 @@ exports.scrollbarWidth = function(document) {
     style.overflow = "scroll";
     var withScrollbar = inner.offsetWidth;
 
-    if (noScrollbar == withScrollbar) {
+    if (noScrollbar === withScrollbar) {
         withScrollbar = outer.clientWidth;
     }
 
     body.removeChild(outer);
 
-    return noScrollbar-withScrollbar;
+    return noScrollbar - withScrollbar;
 };
 
 exports.computedStyle = function(element, style) {