Integrate Third-Party Libraries Using the Privileged Script Tag

Use the custom <x-oasis-script> tag in place of the standard <script> in the head markup or inline. Scripts loaded within this custom tag run inside a special iframe that’s exempt from shadow DOM and are always executed asynchronously.

<x-oasis-script> uses the same syntax as the <script> tag.

<x-oasis-script src="third_party_library.js"></x-oasis-script>

You can also use the tag to add event listeners and to import and export global variables with the imported-global-names and exported-global-names attributes. If you have custom code within the <x-oasis-script> tag, add the attribute hidden="true" to the tag. This attribute ensures that the custom code within the tag remains hidden from site visitors while the page is loading.

<script>
    window.testVar = "myTestVar";
</script>

<x-oasis-script hidden="true" imported-global-names="testVar">
    // Custom code to access testVar
    console.log(window.testVar)
</x-oasis-script>

<x-oasis-script hidden="true" exported-global-names="testVar">
    window.testVar = "myTestVar";
</x-oasis-script>

<script>
    // setTimeout is needed in case this script tag is run before oasis script
    setTimeout(function(){
      // Custom code to access testVar
      console.log(window.testVar)
    }, 5000);
</script>