Use `.converse-root` class instead of `#conversejs` id

src/modals/styles/_modal.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/modal";
 
     #converse-modals {

src/plugins/bookmark-views/styles/bookmarks.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     #controlbox {
         .bookmarks-toggle, .bookmarks-toggle .fa {
             color: var(--groupchats-header-color) !important;
@@ -9,7 +9,7 @@
     }
 }
 
-#conversejs.fullscreen {
+.converse-root.fullscreen {
     #controlbox {
         #chatrooms {
             .bookmarks-list {

src/plugins/chatboxviews/styles/chats.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     converse-chats {
         &.converse-chatboxes {
             z-index: 1031; // One more than bootstrap navbar

src/plugins/chatview/styles/chat-bottom-panel.scss

@@ -3,7 +3,7 @@
 @import "bootstrap/scss/mixins";
 @import "shared/styles/_variables.scss";
 
-#conversejs {
+.converse-root {
     .chatbox {
         .bottom-panel {
 

src/plugins/chatview/styles/chat-head.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     .chatbox {
         .chat-head {
             display: flex;

src/plugins/chatview/styles/chatbox.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     .chatbox {
         text-align: left;
         margin: 0 var(--chat-gutter);

src/plugins/chatview/styles/index.scss

@@ -8,7 +8,7 @@
 
 /* ******************* Overlay and embedded styles *************************** */
 
-#conversejs {
+.converse-root {
     converse-chats.converse-embedded,
     converse-chats.converse-overlayed {
         .controlbox-head {
@@ -80,7 +80,7 @@
 }
 
 @include media-breakpoint-down(sm) {
-    #conversejs.converse-overlayed {
+    .converse-root.converse-overlayed {
         > .row {
             flex-direction: column;
             &.no-gutters {
@@ -91,7 +91,7 @@
 }
 
 
-#conversejs {
+.converse-root {
     converse-chats.converse-embedded,
     converse-chats.converse-fullscreen  {
         .flyout {
@@ -176,7 +176,7 @@
 
 /* ******************* Fullpage styles *************************** */
 
-#conversejs {
+.converse-root {
     converse-chats.converse-fullscreen  {
         .chatbox-btn {
             font-size: var(--fullpage-chatbox-button-size);
@@ -216,7 +216,7 @@
 
 
 @include media-breakpoint-down(sm) {
-    #conversejs {
+    .converse-root {
         converse-chats:not(.converse-embedded)  {
             > .row {
                 flex-direction: row-reverse;

src/plugins/controlbox/styles/_controlbox.scss

@@ -4,7 +4,7 @@
 @import "shared/styles/_variables.scss";
 @import "shared/styles/_mixins.scss";
 
-#conversejs {
+.converse-root {
     .oauth-providers {
         text-align: center;
         .oauth-provider {
@@ -387,7 +387,7 @@
     }
 }
 
-#conversejs {
+.converse-root {
     converse-chats {
         &.converse-overlayed {
 
@@ -612,7 +612,7 @@
 
 @include media-breakpoint-down(sm) {
 
-    #conversejs {
+    .converse-root {
         left: 0;
         right: 0;
         padding-left: env(safe-area-inset-left);

src/plugins/fullscreen/styles/background.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-#conversejs-bg {
+.converse-root-bg {
     .subdued {
         opacity: 0.35;
     }

src/plugins/headlines-view/styles/headlines.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     .chat-head-headline {
         background-color: var(--headline-head-color);
     }
@@ -31,7 +31,7 @@
     }
 }
 
-#conversejs {
+.converse-root {
     converse-chats {
         &.converse-fullscreen {
             .chatbox.headlines {

src/plugins/minimize/styles/minimize.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     converse-chats {
         &.converse-overlayed {
             converse-minimized-chats {

src/plugins/muc-views/styles/index.scss

@@ -13,8 +13,8 @@ converse-muc-destroyed {
     height: 100%;
 }
 
-#conversejs.converse-embedded,
-#conversejs {
+.converse-root.converse-embedded,
+.converse-root {
     .badge--muc {
         background-color: var(--groupchats-header-color);
     }
@@ -30,7 +30,7 @@ converse-muc-destroyed {
 
 /* ******************* Overlay  styles *************************** */
 
-#conversejs {
+.converse-root {
     converse-chats {
         &.converse-overlayed {
             .chatbox {
@@ -162,7 +162,7 @@ converse-muc-destroyed {
 
 
 @include media-breakpoint-down(sm) {
-    #conversejs {
+    .converse-root {
         converse-chats.converse-mobile,
         converse-chats.converse-overlayed,
         converse-chats.converse-fullscreen {

src/plugins/muc-views/styles/muc-bottom-panel.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     converse-muc.chatroom {
         converse-muc-bottom-panel {
             display: contents;

src/plugins/muc-views/styles/muc-forms.scss

@@ -3,7 +3,7 @@ converse-muc-config-form {
     overflow: auto;
 }
 
-#conversejs {
+.converse-root {
     .chatroom {
         .box-flyout {
             .muc-form-container {

src/plugins/muc-views/styles/muc-head.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     converse-muc.chatroom {
         .chat-head-chatroom {
             color: var(--chatroom-head-color);

src/plugins/muc-views/styles/muc-occupants.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     converse-muc.chatroom {
         .box-flyout {
             .occupants {

src/plugins/muc-views/styles/muc.scss

@@ -4,7 +4,7 @@
 @import "plugins/chatview/styles/chatbox.scss";
 @import "./muc-forms.scss";
 
-#conversejs {
+.converse-root {
     .chatroom {
         width: var(--chatroom-width);
         @media screen and (max-height: $mobile-landscape-height){

src/plugins/rootview.js

@@ -1,34 +0,0 @@
-import { api, converse } from "@converse/headless/core";
-
-const u = converse.env.utils;
-
-
-converse.plugins.add('converse-rootview', {
-
-    initialize () {
-
-        api.settings.extend({
-            'auto_insert': true
-        });
-
-        function ensureElement () {
-            if (!api.settings.get('auto_insert')) {
-                return;
-            }
-            const root = api.settings.get('root');
-            if (!root.querySelector('converse-root#conversejs')) {
-                const el = document.createElement('converse-root');
-                el.setAttribute('id', 'conversejs');
-                u.addClass(`theme-${api.settings.get('theme')}`, el);
-                const body = root.querySelector('body');
-                if (body) {
-                    body.appendChild(el);
-                } else {
-                    root.appendChild(el); // Perhaps inside a web component?
-                }
-            }
-        }
-
-        api.listen.on('chatBoxesInitialized', ensureElement);
-    }
-});

src/plugins/rootview/root.js

@@ -18,7 +18,9 @@ class ConverseRoot extends CustomElement {
 
     connectedCallback () {
         super.connectedCallback();
+        this.classList.add('converse-root');
         this.classList.add(`converse-${api.settings.get('view_mode')}`);
+        this.classList.add(`theme-${api.settings.get('theme')}`);
         this.setAttribute('id', 'conversejs');
     }
 }

src/plugins/rootview/utils.js

@@ -1,6 +1,5 @@
-import { api, converse } from '@converse/headless/core';
+import { api } from '@converse/headless/core';
 
-const u = converse.env.utils;
 
 export function ensureElement () {
     if (!api.settings.get('auto_insert')) {
@@ -9,8 +8,6 @@ export function ensureElement () {
     const root = api.settings.get('root');
     if (!root.querySelector('converse-root#conversejs')) {
         const el = document.createElement('converse-root');
-        el.setAttribute('id', 'conversejs');
-        u.addClass(`theme-${api.settings.get('theme')}`, el);
         const body = root.querySelector('body');
         if (body) {
             body.appendChild(el);

src/plugins/rosterview/styles/roster.scss

@@ -1,4 +1,4 @@
-#conversejs #converse-roster {
+.converse-root #converse-roster {
     text-align: left;
     width: 100%;
     position: relative;

src/shared/autocomplete/styles/_autocomplete.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     [hidden] { display: none; }
 
     .visually-hidden {
@@ -128,13 +128,13 @@
     }
 }
 
-#conversejs.converse-fullscreen {
+.converse-root.converse-fullscreen {
     .suggestion-box__results--above {
         bottom: 4.5em;
     }
 }
 
-#conversejs.converse-overlayed {
+.converse-root.converse-overlayed {
     .suggestion-box__results--above {
         bottom: 3.5em;
     }

src/shared/chat/styles/emoji.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/media";
 
     .chatbox {
@@ -192,7 +192,7 @@
     }
 }
 
-#conversejs {
+.converse-root {
     converse-chats {
         &.converse-overlayed  {
             converse-emoji-dropdown {
@@ -268,7 +268,7 @@
 }
 
 @include media-breakpoint-up(m) {
-    #conversejs {
+    .converse-root {
         .chatbox {
             converse-emoji-picker {
                 max-width: 40em;

src/shared/chat/styles/toolbar.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-#conversejs {
+.converse-root {
 
     .send-button {
         border-radius: 0;

src/shared/chat/styles/unfurl.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "shared/styles/_mixins.scss";
 
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/card";
 
     .message {

src/shared/styles/_core.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     bottom: 0;
     height: 100%;
     position: fixed;
@@ -447,7 +447,7 @@
         font-size: 3.75em;
       }
     }
-    #conversejs:not(.converse-embedded)  {
+    .converse-root:not(.converse-embedded)  {
         .chatbox  {
             .chat-body {
                 border-radius: var(--chatbox-border-radius);
@@ -461,33 +461,33 @@
 
 
 @media screen and (min-width: 576px) {
-    #conversejs .offset-sm-2 {
+    .converse-root .offset-sm-2 {
         margin-left: 16.666667%;
     }
 }
 @media screen and (min-width: 768px) {
-    #conversejs .offset-md-2 {
+    .converse-root .offset-md-2 {
         margin-left: 16.666667%;
     }
-    #conversejs .offset-md-3 {
+    .converse-root .offset-md-3 {
         margin-left: 25%;
     }
 }
 @media screen and (min-width: 992px) {
-    #conversejs .offset-lg-2 {
+    .converse-root .offset-lg-2 {
         margin-left: 16.666667%;
     }
-    #conversejs .offset-lg-3 {
+    .converse-root .offset-lg-3 {
         margin-left: 25%;
     }
 }
 @media screen and (min-width: 1200px) {
-    #conversejs .offset-xl-2 {
+    .converse-root .offset-xl-2 {
         margin-left: 16.666667%;
     }
 }
 @media screen and (max-height: 450px) {
-  #conversejs {
+  .converse-root {
     left: 0;
   }
 }

src/shared/styles/_variables.scss

@@ -1,7 +1,7 @@
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
-#conversejs, #conversejs-bg, body.converse-fullscreen {
+.converse-root, .converse-root-bg, body.converse-fullscreen {
     --subdued-color: #A8ABA1;
 
     --green: #3AA569;
@@ -193,7 +193,7 @@ $mobile_portrait_length: 480px !default;
     --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
 }
 
-#conversejs.theme-concord {
+.converse-root.theme-concord {
     --avatar-border-radius: 10%;
     --avatar-border: 0px;
     --avatar-background-color: none;

src/shared/styles/badges.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/badge";
 
     .badge {

src/shared/styles/buttons.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/buttons";
     @import "bootstrap/scss/button-group";
 

src/shared/styles/font-awesome.scss

@@ -64,7 +64,7 @@
 @import "@fortawesome/fontawesome-free/scss/icons";
 @import "@fortawesome/fontawesome-free/scss/screen-reader";
 
-#conversejs, .converse-website {
+.converse-root, .converse-website {
   /* Apparent font-awesome bug? The circle has some kind of bottom margin */
 
   converse-icon:before {

src/shared/styles/forms.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/forms";
     @import "bootstrap/scss/input-group";
     @import "bootstrap/scss/custom-forms";

src/shared/styles/index.scss

@@ -11,7 +11,7 @@
 @import "./font-awesome.scss";
 @import "mixins";
 
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/root";
     @import "bootstrap/scss/reboot";
     @import "bootstrap/scss/type";

src/shared/styles/lists.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     @import "bootstrap/scss/list-group";
 
     .list-group-item.active {

src/shared/styles/messages.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.converse-root {
     .styling-directive {
         color: var(--subdued-color);
     }