address-custom-element.html

<template id="address_custom_element_tpl">
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>
    <ul></ul>
</template>
<script type="module">
    class AddressCustomElement extends HTMLElement {

        static get observedAttributes() {
            return ['address'];
        }
        constructor() {
            super();
            this.attachShadow({mode: 'open'});
            const tpl = document.getElementById('address_custom_element_tpl');
            this.shadowRoot.appendChild(tpl.content.cloneNode(true));
        }

        render() {
            const ul = this.shadowRoot.querySelector('ul');
            const address = this.getAttribute('address')
                .split('\n')
                .map(line => {
                    const li = document.createElement('li');
                    li.textContent = line;
                    return li;
                });
            ul.replaceChildren(...address);
        }
        connectedCallback() {
            this.render();
        }
        attributeChangedCallback(name, oldValue, newValue) {
            if (oldValue !== newValue) {
                this.render();
            }
        }
    }
    customElements.define('address-custom-element', AddressCustomElement);
</script>