I have an angular.js application where I need to initialize a web component.
Everything runs smoothly on different browsers, however IE11 seems to have problems with
document.importNode
The angular.js onInit function is as follows:
vm.$onInit = function() {
vm.params = $location.search();
if(vm.params.merchantId && vm.params.apiToken && vm.params.amount && vm.params.orderId) {
vm.mid = vm.params.merchantId;
vm.apiToken = vm.params.apiToken;
vm.amount = vm.params.amount;
vm.orderId = vm.params.orderId;
let template = document.querySelector('#template');
let clone = document.importNode(template.content, true);
let cmp = clone.querySelector('cmp-request');
cmp.setAttribute('mid', vm.mid);
template.replaceWith(clone);
}
}
Here is the HTML code:
<template id="template">
<cmp-request></cmp-request>
</template>
Is there another method to clone and pass parameters into a web component without using importNode so it works on IE11?