--- a/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
@@ -18,18 +18,17 @@ const TOOLTIP_HEIGHT = 308;
  * @param {Document} toolboxDoc
  *        The toolbox document to attach the CSS docs tooltip.
  */
 function CssDocsTooltip(toolboxDoc) {
   this.tooltip = new HTMLTooltip(toolboxDoc, {
     type: "arrow",
     consumeOutsideClicks: true,
     autofocus: true,
-    useXulWrapper: true,
-    stylesheet: "chrome://devtools/content/shared/widgets/mdn-docs.css",
+    useXulWrapper: true
   });
   this.widget = this.setMdnDocsContent();
   this._onVisitLink = this._onVisitLink.bind(this);
   this.widget.on("visitlink", this._onVisitLink);
 
   // Initialize keyboard shortcuts
   this.shortcuts = new KeyShortcuts({ window: this.tooltip.topWindow });
   this._onShortcut = this._onShortcut.bind(this);

--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -208,25 +208,22 @@ const getRelativeRect = function (node, 
  *        - {Boolean} autofocus
  *          Defaults to false. Should the tooltip be focused when opening it.
  *        - {Boolean} consumeOutsideClicks
  *          Defaults to true. The tooltip is closed when clicking outside.
  *          Should this event be stopped and consumed or not.
  *        - {Boolean} useXulWrapper
  *          Defaults to false. If the tooltip is hosted in a XUL document, use a XUL panel
  *          in order to use all the screen viewport available.
- *        - {String} stylesheet
- *          Style sheet URL to apply to the tooltip content.
  */
 function HTMLTooltip(toolboxDoc, {
     type = "normal",
     autofocus = false,
     consumeOutsideClicks = true,
     useXulWrapper = false,
-    stylesheet = "",
   } = {}) {
   EventEmitter.decorate(this);
 
   this.doc = toolboxDoc;
   this.type = type;
   this.autofocus = autofocus;
   this.consumeOutsideClicks = consumeOutsideClicks;
   this.useXulWrapper = this._isXUL() && useXulWrapper;
@@ -241,19 +238,16 @@ function HTMLTooltip(toolboxDoc, {
   this._onXulPanelHidden = this._onXulPanelHidden.bind(this);
 
   this._toggle = new TooltipToggle(this);
   this.startTogglingOnHover = this._toggle.start.bind(this._toggle);
   this.stopTogglingOnHover = this._toggle.stop.bind(this._toggle);
 
   this.container = this._createContainer();
 
-  if (stylesheet) {
-    this._applyStylesheet(stylesheet);
-  }
   if (this.useXulWrapper) {
     // When using a XUL panel as the wrapper, the actual markup for the tooltip is as
     // follows :
     // <panel> <!-- XUL panel used to position the tooltip anywhere on screen -->
     //   <div> <!-- div wrapper used to isolate the tooltip container -->
     //     <div> <! the actual tooltip.container element -->
     this.xulPanelWrapper = this._createXulPanelWrapper();
     let inner = this.doc.createElementNS(XHTML_NS, "div");
@@ -629,21 +623,9 @@ HTMLTooltip.prototype = {
    */
   _convertToScreenRect: function ({left, top, width, height}) {
     // mozInnerScreenX/Y are the coordinates of the top left corner of the window's
     // viewport, excluding chrome UI.
     left += this.doc.defaultView.mozInnerScreenX;
     top += this.doc.defaultView.mozInnerScreenY;
     return {top, right: left + width, bottom: top + height, left, width, height};
   },
-
-  /**
-   * Apply a scoped stylesheet to the container so that this css file only
-   * applies to it.
-   */
-  _applyStylesheet: function (url) {
-    let style = this.doc.createElementNS(XHTML_NS, "style");
-    style.setAttribute("scoped", "true");
-    url = url.replace(/"/g, "\\\"");
-    style.textContent = `@import url("${url}");`;
-    this.container.appendChild(style);
-  }
 };

--- a/devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js
@@ -14,38 +14,35 @@ const INLINE_TOOLTIP_CLASS = "inline-too
 /**
  * Base class for all (color, gradient, ...)-swatch based value editors inside
  * tooltips
  *
  * @param {Document} document
  *        The document to attach the SwatchBasedEditorTooltip. This is either the toolbox
  *        document if the tooltip is a popup tooltip or the panel's document if it is an
  *        inline editor.
- * @param {String} stylesheet
- *        The stylesheet to be used for the HTMLTooltip.
  * @param {Boolean} useInline
  *        A boolean flag representing whether or not the InlineTooltip should be used.
  */
-function SwatchBasedEditorTooltip(document, stylesheet, useInline) {
+function SwatchBasedEditorTooltip(document, useInline) {
   EventEmitter.decorate(this);
 
   this.useInline = useInline;
 
   // Creating a tooltip instance
   if (useInline) {
     this.tooltip = new InlineTooltip(document);
   } else {
     // This one will consume outside clicks as it makes more sense to let the user
     // close the tooltip by clicking out
     // It will also close on <escape> and <enter>
     this.tooltip = new HTMLTooltip(document, {
       type: "arrow",
       consumeOutsideClicks: true,
       useXulWrapper: true,
-      stylesheet
     });
   }
 
   // By default, swatch-based editor tooltips revert value change on <esc> and
   // commit value change on <enter>
   this.shortcuts = new KeyShortcuts({
     window: this.tooltip.topWindow
   });

--- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
@@ -33,20 +33,17 @@ const XHTML_NS = "http://www.w3.org/1999
  * @param {InspectorPanel} inspector
  *        The inspector panel, needed for the eyedropper.
  * @param {Function} supportsCssColor4ColorFunction
  *        A function for checking the supporting of css-color-4 color function.
  */
 function SwatchColorPickerTooltip(document,
                                   inspector,
                                   {supportsCssColor4ColorFunction}) {
-  let stylesheet = NEW_COLOR_WIDGET ?
-    "chrome://devtools/content/shared/widgets/color-widget.css" :
-    "chrome://devtools/content/shared/widgets/spectrum.css";
-  SwatchBasedEditorTooltip.call(this, document, stylesheet);
+  SwatchBasedEditorTooltip.call(this, document);
 
   this.inspector = inspector;
 
   // Creating a spectrum instance. this.spectrum will always be a promise that
   // resolves to the spectrum instance
   this.spectrum = this.setColorPickerContent([0, 0, 0, 1]);
   this._onSpectrumColorChange = this._onSpectrumColorChange.bind(this);
   this._openEyeDropper = this._openEyeDropper.bind(this);

--- a/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
@@ -21,18 +21,17 @@ const XHTML_NS = "http://www.w3.org/1999
  * CubicBezierWidget.
  *
  * @param {Document} document
  *        The document to attach the SwatchCubicBezierTooltip. This is either the toolbox
  *        document if the tooltip is a popup tooltip or the panel's document if it is an
  *        inline editor.
  */
 function SwatchCubicBezierTooltip(document) {
-  let stylesheet = "chrome://devtools/content/shared/widgets/cubic-bezier.css";
-  SwatchBasedEditorTooltip.call(this, document, stylesheet);
+  SwatchBasedEditorTooltip.call(this, document);
 
   // Creating a cubic-bezier instance.
   // this.widget will always be a promise that resolves to the widget instance
   this.widget = this.setCubicBezierContent([0, 0, 1, 1]);
   this._onUpdate = this._onUpdate.bind(this);
 }
 
 SwatchCubicBezierTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.prototype, {

--- a/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
@@ -23,18 +23,17 @@ const XHTML_NS = "http://www.w3.org/1999
  *        The document to attach the SwatchFilterTooltip. This is either the toolbox
  *        document if the tooltip is a popup tooltip or the panel's document if it is an
  *        inline editor.
  * @param {function} cssIsValid
  *        A function to check that css declaration's name and values are valid together.
  *        This can be obtained from "shared/fronts/css-properties.js".
  */
 function SwatchFilterTooltip(document, cssIsValid) {
-  let stylesheet = "chrome://devtools/content/shared/widgets/filter-widget.css";
-  SwatchBasedEditorTooltip.call(this, document, stylesheet);
+  SwatchBasedEditorTooltip.call(this, document);
   this._cssIsValid = cssIsValid;
 
   // Creating a filter editor instance.
   this.widget = this.setFilterContent("none");
   this._onUpdate = this._onUpdate.bind(this);
 }
 
 SwatchFilterTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.prototype, {

--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -1,13 +1,20 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* Import stylesheets for specific tooltip widgets */
+@import url(chrome://devtools/content/shared/widgets/color-widget.css);
+@import url(chrome://devtools/content/shared/widgets/cubic-bezier.css);
+@import url(chrome://devtools/content/shared/widgets/filter-widget.css);
+@import url(chrome://devtools/content/shared/widgets/mdn-docs.css);
+@import url(chrome://devtools/content/shared/widgets/spectrum.css);
+
 /* Tooltip specific theme variables */
 
 .theme-dark {
   --bezier-diagonal-color: #eee;
   --bezier-grid-color: rgba(0, 0, 0, 0.2);
 }
 
 .theme-light {