Use data- attribute instead of span to store room name

src/plugins/roomslist/templates/roomslist.js

@@ -59,6 +59,7 @@ function tplRoomItem (el, room) {
 
             <a class="list-item-link open-room available-room w-100"
                 data-room-jid="${room.get('jid')}"
+                data-room-name="${room.getDisplayName()}"
                 title="${__('Click to open this groupchat')}"
                 @click=${ev => el.openRoom(ev)}>
                 <converse-avatar
@@ -70,7 +71,7 @@ function tplRoomItem (el, room) {
                 <span>${ room.get('num_unread') ?
                             tplUnreadIndicator(room) :
                             (room.get('has_activity') ? tplActivityIndicator() : '') }
-                    <span class="room-name">${room.getDisplayName()}</span></span>
+                    ${room.getDisplayName()}</span>
             </a>
 
             ${ api.settings.get('allow_bookmarks') ? tplBookmark(room) : '' }

src/plugins/roomslist/view.js

@@ -55,7 +55,7 @@ export class RoomsList extends CustomElement {
     async openRoom (ev) {
         ev.preventDefault();
         const target = u.ancestor(/** @type {HTMLElement} */(ev.target), '.open-room');
-        const name = target.querySelector(".room-name")?.textContent;
+        const name = target.getAttribute('data-room-name');
         const jid = target.getAttribute('data-room-jid');
         const data = {
             'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid