I am attempting to include rich content inside the elements of a paper-menu. However, it seems that this is not working as intended (refer to the screenshot below).
What steps should be taken to incorporate styled HTML into the paper-item?
Below is the provided code:
<style is="custom-style">
.personItem {
@apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.avatar {
height: 50px;
width: 50px;
border-radius: 25px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
@apply(--layout-flex);
@apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.dim {
color: gray;
}
</style>
<paper-menu-button vertical-align="top" horizontal-align="right" vertical-offset="64">
<paper-icon-button id="notif" icon="social:notifications" class="dropdown-trigger" alt="menu"></paper-icon-button>
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="[[notifications]]" as="item">
<paper-item>
<paper-item-body two-line>
<!--<div th:inline="none"><iron-icon icon='communication:message'></iron-icon></div>-->
<div secondary th:inline="none">
<div class="personItem">
<iron-image class="avatar" sizing="contain" src="[[item.pic]]"></iron-image>
<div class="pad">
<div class="primary" th:inline="none">
<span style="float:right;">[[m.date]]</span>
<span>[[m.user]]</span>
</div>
<div class="dim" th:inline="none">[[m.content]]</div>
</div>
</div>
</div>
</paper-item-body>
</paper-item>
</template>
</paper-menu>
</paper-menu-button>
<paper-badge id="badge" for="notif" label="[[number]]"></paper-badge>