Ist gestyltes HTML in einem Polymer-Papier-Artikel möglich?

Question

Ich versuche, einige reiche Inhalte in die Elemente einer paper-menu zu bringen, jedoch scheint dies nicht wie erwartet zu funktionieren (siehe Screenshot unten).

Was getan werden muss, um gestyltes HTML zum paper-item hinzuzufügen. hier

ist der 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> 

Answer 1

Diese mehr oder weniger das, was produziert ich erreichen wollte:

<paper-menu-button> 
    <paper-icon-button id="n" 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-icon-item> 
       <iron-icon item-icon class="avatar" sizing="contain" src="/path/to/pic"></iron-icon> 
       <paper-item-body two-line> 
        <div>John Doe</div> 
        <div secondary>Hello World</div> 
       </paper-item-body> 
       <paper-icon-button icon="communication:message"></paper-icon-button> 
      </paper-icon-item> 
     </template> 
    </paper-menu> 
</paper-menu-button> 
<paper-badge id="badge" for="n" label="[[number]]"></paper-badge>