Light Dom Custom Web Component - List

[bRomeroTR]

Hello, I'm looking for a way of passing content to a Custom Web Component with Light DOM enable, since the use of <slot> is not possible I have passed strings for text content as attribute values, I could say is not problem for Atomic Components, but it gets complex and vulnerable when I need to pass content for a more complex component, passing HTML markup within an attribute is not a good idea.

Do you know any alternatives? So, I can make it work with light DOM.

I paste an example of list component that I have now

list.ts

export class List extends FASTElement {
    @attr listType: string = '';
    @attr listTitle: string = '';
    @attr listContent: string = '';
}

template.ts

html`
    <ul class="List List--indented">
        <li>
        ${listTitle}
            <ul class="List">
                ${listContent}
            </ul>
        </li>
    </ul>
`;

storie.ts

<list
    listType="indented"
    listTitle="<list-item href='#' text='text'></list-item>" 
    listContent="
        <list-item href='#' text='text'></list-item>
        <list-item href='#' text='text'></list-item>
        <list-item href='#' text='text'></list-item>
        <list-item href='#' text='text'></list-item>
        <list-item href='#' text='text'></list-item>
        <list-item href='#' text='text'><list-item>
        <list-item href='#' text='text'></list-item>
">
</list>

I'm sorry if it is a Dumb question, but I run out of ideas