Using it in axa.ch and without waiting ondomready crahes the flattened DOM

[LucaMele]

this:

<axa-cookie-disclaimer fixed button-name="Akzeptieren" title="Datenschutzbestimmungen" classes="o-cookie-disclaimer">
  <p>
    Wir verwenden Cookies und Analyse Tools, um die Nutzerfreundlichkeit der Internet-Seite zu verbessern und die Werbung von AXA und Werbepartnern zu personalisieren. Weitere Infos:
    <axa-link color="white" icons-path-prefix="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#" href="/content/axa/de/informationen/datenschutz.html" arrow>
      Datenschutz
    </axa-link>
  </p>
</axa-cookie-disclaimer>

[LucaMele]

puts the <p> tag at the end of the tree instead of in the middle of o-container

[LucaMele]

BROKEN since: 2.0.1-beta.165. ok with 2.0.1-beta.164

[AndyOGo]

Received:

<axa-cookie-disclaimer fixed="" button-name="Akzeptieren" title="Datenschutzbestimmungen" classes="o-cookie-disclaimer" class=" o-cookie-disclaimer">
  <article class="o-cookie-disclaimer o-cookie-disclaimer--fixed">
    <axa-container>
      <article class="o-container ">
        <div class="o-cookie-disclaimer__container o-cookie-disclaimer__container--lx">
          <h1 class="o-cookie-disclaimer__title">Datenschutzbestimmungen</h1>
        </div>
        <div class="o-cookie-disclaimer__container o-cookie-disclaimer__container--rx">
          <axa-button ghost="ghost" classes="js-cookie-disclaimer__button" color="white" tag="button"><button type="button" class="m-button js-button js-cookie-disclaimer__button m-button--white m-button--ghost">Akzeptieren</button></axa-button>
        </div>
      </article>
    </axa-container>
  </article>
  <p>
    Wir verwenden Cookies und Analyse Tools, um die Nutzerfreundlichkeit der Internet-Seite zu verbessern und die Werbung von AXA und Werbepartnern zu personalisieren. Weitere Infos: 
    <axa-link color="white" icons-path-prefix="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#" href="/content/axa/de/informationen/datenschutz.html" arrow="">
      <a href="/content/axa/de/informationen/datenschutz.html" class="m-link m-link--white m-link--arrow">
        <axa-icon path-prefix="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#" icon="arrow" classes="m-link__arrow">
          <svg class="m-link__arrow">
            <use xlink:href="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#arrow" href="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#arrow"></use>
          </svg>
        </axa-icon>
      </a>
      Datenschutz
    </axa-link>
  </p>
</axa-cookie-disclaimer>

Expected:

<axa-cookie-disclaimer fixed="" button-name="Akzeptieren" title="Datenschutzbestimmungen" classes="o-cookie-disclaimer" class=" o-cookie-disclaimer">
  <article class="o-cookie-disclaimer o-cookie-disclaimer--fixed">
    <axa-container>
      <article class="o-container ">
        <div class="o-cookie-disclaimer__container o-cookie-disclaimer__container--lx">
          <h1 class="o-cookie-disclaimer__title">Datenschutzbestimmungen</h1>
          <p>
            Wir verwenden Cookies und Analyse Tools, um die Nutzerfreundlichkeit der Internet-Seite zu verbessern und die Werbung von AXA und Werbepartnern zu personalisieren. Weitere Infos: 
            <axa-link color="white" icons-path-prefix="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#" href="/content/axa/de/informationen/datenschutz.html" arrow="">
              <a href="/content/axa/de/informationen/datenschutz.html" class="m-link m-link--white m-link--arrow">
                <axa-icon path-prefix="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#" icon="arrow" classes="m-link__arrow">
                  <svg class="m-link__arrow">
                    <use xlink:href="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#arrow" href="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#arrow"></use>
                  </svg>
                </axa-icon>
              </a>
              Datenschutz
            </axa-link>
          </p>
        </div>
        <div class="o-cookie-disclaimer__container o-cookie-disclaimer__container--rx">
          <axa-button ghost="ghost" classes="js-cookie-disclaimer__button" color="white" tag="button"><button type="button" class="m-button js-button js-cookie-disclaimer__button m-button--white m-button--ghost">Akzeptieren</button></axa-button>
        </div>
      </article>
    </axa-container>
  </article>
</axa-cookie-disclaimer>

[LucaMele]

As quick and dirty fix: https://github.com/axa-ch/patterns-library/pull/516

[AndyOGo]

@LucaMele I would like to clarify the problem and step through all phases in detail.

First: we utilize the <axa-cookie-disclaimer> custom element, like (note it's light DOM - the <p> tag):

<axa-cookie-disclaimer fixed button-name="Akzeptieren" title="Datenschutzbestimmungen" classes="o-cookie-disclaimer">
  <p>
    Wir verwenden Cookies und Analyse Tools, um die Nutzerfreundlichkeit der Internet-Seite zu verbessern und die Werbung von AXA und Werbepartnern zu personalisieren. Weitere Infos:
    <axa-link color="white" icons-path-prefix="/etc/clientlibs/axa/frontend-lib/images/icons-v2.svg#" href="/content/axa/de/informationen/datenschutz.html" arrow>
      Datenschutz
    </axa-link>
  </p>
</axa-cookie-disclaimer>

Second: we wire through above light DOM into it's local DOM, which is defined in it's template as: Note the usage of <axa-container> custom element here and the forwarding of <axa-cookie-disclaimer>'s children into the <axa-container>.

<article class="${classes} ${fixed ? 'o-cookie-disclaimer--fixed' : ''}">
    <axa-container>
      <div class="o-cookie-disclaimer__container o-cookie-disclaimer__container--lx">
        <h1 class="o-cookie-disclaimer__title">${title}</h1>
        ${childrenFragment}
      </div>
      <div class="o-cookie-disclaimer__container o-cookie-disclaimer__container--rx">
        <axa-button ghost classes="js-cookie-disclaimer__button" color="white" tag="button">${buttonName}</axa-button>
      </div>
    </axa-container>
  </article>

Now the <axa-container> has itself a light, local and flattened DOM! This is critical, because now we have 2 light DOMs, 2 local DOMs and 2 resulting flattened DOMs, in particular:

• the light, local and flattened DOM of <axa-cookie-disclaimer>
• and within the local-DOM of above the light, local and flattened DOM of <axa-container>
• Further more both of them render asynchronously, this is also critical, which means both of them mutate the DOM incrementally and morph it.

Last but not least this childrenFragment is "managed" (in the sense of CRUD) by <axa-cookie-disclaimer>, but displayed/rendered by <axa-container>, which is itself a DOM mutation of moving the children of <axa-cookie-disclaimer> to <axa-container>. And since both have completely separate and and asynchronous render phases this move operation IS NOT SYNCHRONOUS.

To be more specific the light DOM of <axa-cookie-disclaimer> gets forwarded into the local DOM of <axa-container>.

And I'm convinced that this is what we should either never do, moving custom elements children within the local DOM into another custom element. Or we have to find a way to deal with it.

To deal with it, we would need to bridge children DOM move mutations asynchronously inside local DOM to make sure everything is where it is supposed to be.

Definition of to bridge by oxford dictionary:

Make (a difference between two groups) smaller or less significant.

[AndyOGo]

Wau, order of custom elements definition and it's utilisation seems to be key 😲