--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -48,22 +48,24 @@ a {
   align-self: flex-start;
 }
 
 .theme-firebug .message > .icon {
   margin: 0;
   margin-inline-end: 6px;
 }
 
-.theme-firebug .message[severity="error"] {
+.theme-firebug .message[severity="error"],
+.theme-firebug .message.error {
   color: var(--error-color);
   background-color: var(--error-background-color);
 }
 
-.theme-firebug .message[severity="warn"] {
+.theme-firebug .message[severity="warn"],
+.theme-firebug .message.warn {
   background-color: var(--warning-background-color);
 }
 
 .message > .icon::before {
   content: "";
   background-image: url(chrome://devtools/skin/images/webconsole.svg);
   background-position: 12px 12px;
   background-repeat: no-repeat;
@@ -205,21 +207,23 @@ a {
   background-image: linear-gradient(#444444, #000000);
   border-color: #777;
 }
 
 .message:hover {
   background-color: var(--theme-selection-background-semitransparent) !important;
 }
 
-.theme-light .message[severity=error] {
+.theme-light .message[severity=error],
+.theme-light .message.error {
   background-color: rgba(255, 150, 150, 0.3);
 }
 
-.theme-dark .message[severity=error] {
+.theme-dark .message[severity=error],
+.theme-dark .message.error {
   background-color: rgba(235, 83, 104, 0.17);
 }
 
 .console-string {
   color: var(--theme-highlight-lightorange);
 }
 
 .theme-selected .console-string,
@@ -228,54 +232,61 @@ a {
 .theme-selected .kind-ArrayLike {
   color: #f5f7fa !important; /* Selection Text Color */
 }
 
 .message[category=network] > .indent {
   border-inline-end: solid var(--theme-body-color-alt) 6px;
 }
 
-.message[category=network][severity=error] > .icon::before {
+.message[category=network][severity=error] > .icon::before,
+.message.network.error > .icon::before {
   background-position: -12px 0;
 }
 
-.message[category=network] > .message-body {
+.message[category=network] > .message-body,
+.message.network > .message-body {
   display: flex;
   flex-wrap: wrap;
 }
 
-.message[category=network] .method {
+.message[category=network] .method,
+.message.network .method {
   flex: none;
 }
 
-.message[category=network]:not(.navigation-marker) .url {
+.message[category=network]:not(.navigation-marker) .url,
+.message.network:not(.navigation-marker) .url {
   flex: 1 1 auto;
   /* Make sure the URL is very small initially, let flex change width as needed. */
   width: 100px;
   min-width: 5em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.message[category=network] .status {
+.message[category=network] .status,
+.message.network .status {
   flex: none;
   margin-inline-start: 6px;
 }
 
-.message[category=network].mixed-content .url {
+.message[category=network].mixed-content .url,
+.message.network.mixed-content .url {
   color: var(--theme-highlight-red);
 }
 
 .message .learn-more-link {
   color: var(--theme-highlight-blue);
   margin: 0 6px;
 }
 
-.message[category=network] .xhr {
+.message[category=network] .xhr,
+.message.network .xhr {
   background-color: var(--theme-body-color-alt);
   color: var(--theme-body-background);
   border-radius: 3px;
   font-weight: bold;
   font-size: 10px;
   padding: 2px;
   line-height: 10px;
   margin-inline-start: 3px;
@@ -283,94 +294,113 @@ a {
 }
 
 /* CSS styles */
 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(#2DC3F3, #00B6F0);
   border-color: #1BA2CC;
 }
 
-.message[category=cssparser] > .indent {
+.message[category=cssparser] > .indent,
+.message.cssparser > .indent  {
   border-inline-end: solid #00b6f0 6px;
 }
 
-.message[category=cssparser][severity=error] > .icon::before {
+.message[category=cssparser][severity=error] > .icon::before,
+.message.cssparser.error > .icon::before {
   background-position: -12px -12px;
 }
 
-.message[category=cssparser][severity=warn] > .icon::before {
+.message[category=cssparser][severity=warn] > .icon::before,
+.message.cssparser.warn > .icon::before {
   background-position: -24px -12px;
 }
 
 /* JS styles */
 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(#FCB142, #FB9500);
   border-color: #E98A00;
 }
 
-.message[category=exception] > .indent {
+.message[category=exception] > .indent,
+.message.exception > .indent {
   border-inline-end: solid #fb9500 6px;
 }
 
-.message[category=exception][severity=error] > .icon::before {
+.message[category=exception][severity=error] > .icon::before,
+.message.exception.error > .icon::before {
   background-position: -12px -24px;
 }
 
-.message[category=exception][severity=warn] > .icon::before {
+.message[category=exception][severity=warn] > .icon::before,
+.message.exception.warn > .icon::before {
   background-position: -24px -24px;
 }
 
 /* Web Developer styles */
 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(#B9B9B9, #AAAAAA);
   border-color: #929292;
 }
 
-.message[category=console] > .indent {
+.message[category=console] > .indent,
+.message.console > .indent {
   border-inline-end: solid #cbcbcb 6px;
 }
 
 .message[category=console][severity=error] > .icon::before,
 .message[category=output][severity=error] > .icon::before,
-.message[category=server][severity=error] > .icon::before {
+.message[category=server][severity=error] > .icon::before,
+.message.console.error > .icon::before,
+.message.output.error > .icon::before,
+.message.server.error > .icon::before {
   background-position: -12px -36px;
 }
 
 .message[category=console][severity=warn] > .icon::before,
-.message[category=server][severity=warn] > .icon::before {
+.message[category=server][severity=warn] > .icon::before,
+.message.console.warn > .icon::before,
+.message.server.warn > .icon::before {
   background-position: -24px -36px;
 }
 
 .message[category=console][severity=info] > .icon::before,
-.message[category=server][severity=info] > .icon::before {
+.message[category=server][severity=info] > .icon::before,
+.message.console.info > .icon::before,
+.message.server.info > .icon::before {
   background-position: -36px -36px;
 }
 
 /* Server Logging Styles */
 
 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99));
   border-color: rgb(76, 143, 76);
 }
 
-.message[category=server] > .indent {
+.message[category=server] > .indent,
+.message.server > .indent {
   border-inline-end: solid #90B090 6px;
 }
 
 /* Input and output styles */
 .message[category=input] > .indent,
-.message[category=output] > .indent {
+.message[category=output] > .indent,
+.message.input > .indent,
+.message.output > .indent {
   border-inline-end: solid #808080 6px;
 }
 
-.message[category=input] > .icon::before {
+.message[category=input] > .icon::before,
+.message.input > .icon::before {
   background-position: -48px -36px;
 }
 
-.message[category=output] > .icon::before {
+.message[category=output] > .icon::before,
+.message.output > .icon::before {
   background-position: -60px -36px;
 }
 
 /* JSTerm Styles */
 .jsterm-input-container {
   background-color: var(--theme-tab-toolbar-background);
   border-top: 1px solid var(--theme-splitter-color);
 }
@@ -453,30 +483,33 @@ a {
 }
 
 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
   display: none;
 }
 
 /* Security styles */
 
-.message[category=security] > .indent {
+.message[category=security] > .indent,
+.message.security > .indent {
   border-inline-end: solid red 6px;
 }
 
 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(#FF3030, #FF7D7D);
   border-color: #D12C2C;
 }
 
-.message[category=security][severity=error] > .icon::before {
+.message[category=security][severity=error] > .icon::before,
+.message.security.error > .icon::before {
   background-position: -12px -48px;
 }
 
-.message[category=security][severity=warn] > .icon::before {
+.message[category=security][severity=warn] > .icon::before,
+.message.security.warn > .icon::before {
   background-position: -24px -48px;
 }
 
 .navigation-marker {
   color: #aaa;
   background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
   background-size: 100% 2px;
   margin-top: 6px;
@@ -512,21 +545,23 @@ a {
    rows get out of vertical alignment when one cell has a lot of content. */
 .consoletable .table-widget-cell > span {
   overflow: hidden;
   display: flex;
   height: 1.25em;
   line-height: 1.25em;
 }
 
-.theme-light .message[severity=error] .stacktrace {
+.theme-light .message[severity=error] .stacktrace,
+.theme-light .message.error .stacktrace {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
-.theme-dark .message[severity=error] .stacktrace {
+.theme-dark .message[severity=error] .stacktrace,
+.theme-dark .message.error .stacktrace {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
 .message[open] .stacktrace {
   display: block;
 }
 
 .message .theme-twisty {

--- a/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js
@@ -19,32 +19,37 @@ const MessageIcon = createFactory(requir
 ConsoleApiCall.displayName = "ConsoleApiCall";
 
 ConsoleApiCall.propTypes = {
   message: PropTypes.object.isRequired,
 };
 
 function ConsoleApiCall(props) {
   const { message } = props;
+  const {category, severity} = message;
 
   const messageBody = message.parameters ?
     message.parameters.map((grip) => GripMessageBody({grip})) :
     message.messageText;
 
-  const icon = MessageIcon({severity: message.severity});
+  const icon = MessageIcon({severity: severity});
   const repeat = MessageRepeat({repeat: message.repeat});
 
-  // @TODO Use of "is" is a temporary hack to get the category and severity
-  // attributes to be applied. There are targeted in webconsole's CSS rules,
-  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  const classes = ["message", "cm-s-mozilla"];
+
+  if (category) {
+    classes.push(category);
+  }
+
+  if (severity) {
+    classes.push(severity);
+  }
+
   return dom.div({
-    class: "message cm-s-mozilla",
-    is: "fdt-message",
-    category: message.category,
-    severity: message.severity
+    className: classes.join(" ")
   },
     // @TODO add timestamp
     // @TODO add indent if necessary
     icon,
     dom.span({className: "message-body-wrapper"},
       dom.span({},
         dom.span({className: "message-flex-body"},
           dom.span({className: "message-body devtools-monospace"},

--- a/devtools/client/webconsole/new-console-output/components/message-types/console-command.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/console-command.js
@@ -21,28 +21,33 @@ ConsoleCommand.propTypes = {
   message: PropTypes.instanceOf(ConsoleCommandType).isRequired,
 };
 
 /**
  * Displays input from the console.
  */
 function ConsoleCommand(props) {
   const { message } = props;
+  const {category, severity} = message;
 
-  const icon = MessageIcon({severity: message.severity});
+  const icon = MessageIcon({severity: severity});
+
+  const classes = ["message"];
 
-  // @TODO Use of "is" is a temporary hack to get the category and severity
-  // attributes to be applied. There are targeted in webconsole's CSS rules,
-  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  if (category) {
+    classes.push(category);
+  }
+
+  if (severity) {
+    classes.push(severity);
+  }
+
   return dom.div({
-    class: "message",
+    className: classes.join(" "),
     ariaLive: "off",
-    is: "fdt-message",
-    category: message.category,
-    severity: message.severity
   },
     // @TODO add timestamp
     // @TODO add indent if necessary
     icon,
     dom.span({className: "message-body-wrapper message-body devtools-monospace"},
       dom.span({}, message.messageText)
     )
   );

--- a/devtools/client/webconsole/new-console-output/components/message-types/default-renderer.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/default-renderer.js
@@ -9,17 +9,14 @@
 // React & Redux
 const {
   DOM: dom,
 } = require("devtools/client/shared/vendor/react");
 
 DefaultRenderer.displayName = "DefaultRenderer";
 
 function DefaultRenderer(props) {
-  // @TODO Use of "is" is a temporary hack to get the category and severity
-  // attributes to be applied. There are targeted in webconsole's CSS rules,
-  // so if we remove this hack, we have to modify the CSS rules accordingly.
   return dom.div({},
     "This message type is not supported yet."
   );
 }
 
 module.exports.DefaultRenderer = DefaultRenderer;

--- a/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js
@@ -18,26 +18,31 @@ const MessageIcon = createFactory(requir
 EvaluationResult.displayName = "EvaluationResult";
 
 EvaluationResult.propTypes = {
   message: PropTypes.object.isRequired,
 };
 
 function EvaluationResult(props) {
   const { message } = props;
-  const icon = MessageIcon({severity: message.severity});
+  const {category, severity} = message;
+  const icon = MessageIcon({severity: severity});
+
+  const classes = ["message", "cm-s-mozilla"];
 
-  // @TODO Use of "is" is a temporary hack to get the category and severity
-  // attributes to be applied. There are targeted in webconsole's CSS rules,
-  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  if (category) {
+    classes.push(category);
+  }
+
+  if (severity) {
+    classes.push(severity);
+  }
+
   return dom.div({
-    class: "message cm-s-mozilla",
-    is: "fdt-message",
-    category: message.category,
-    severity: message.severity
+    className: classes.join(" ")
   },
     // @TODO add timestamp
     // @TODO add indent if needed with console.group
     icon,
     dom.span(
       {className: "message-body-wrapper message-body devtools-monospace"},
       dom.span({},
         GripMessageBody({grip: message.parameters})

--- a/devtools/client/webconsole/new-console-output/components/message-types/page-error.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/page-error.js
@@ -18,27 +18,33 @@ const MessageIcon = createFactory(requir
 PageError.displayName = "PageError";
 
 PageError.propTypes = {
   message: PropTypes.object.isRequired,
 };
 
 function PageError(props) {
   const { message } = props;
+  const {category, severity} = message;
+
   const repeat = MessageRepeat({repeat: message.repeat});
-  const icon = MessageIcon({severity: message.severity});
+  const icon = MessageIcon({severity: severity});
+
+  const classes = ["message"];
 
-  // @TODO Use of "is" is a temporary hack to get the category and severity
-  // attributes to be applied. There are targeted in webconsole's CSS rules,
-  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  if (category) {
+    classes.push(category);
+  }
+
+  if (severity) {
+    classes.push(severity);
+  }
+
   return dom.div({
-    class: "message",
-    is: "fdt-message",
-    category: message.category,
-    severity: message.severity
+    className: classes.join(" ")
   },
     icon,
     dom.span(
       {className: "message-body-wrapper message-body devtools-monospace"},
       dom.span({},
         message.messageText
       )
     ),