Developing web components using angular.js while ensuring compatibility with IE11

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?

javascriptangularjsinternet-explorercloneweb-component

Answer №1

Unfortunately, Internet Explorer 11 does not support the importNode and replaceWith functions. To work around this limitation, I utilize the children method to extract the children of a <template> element in order to access web components in IE 11. Moreover, for the replaceWith function, I have implemented a polyfill which can be foundhere, enabling support for it in IE 11.

To provide you with a practical example, here is a code snippet using placeholder values:

function ReplaceWithPolyfill() {
  'use-strict'; 
  var parent = this.parentNode,
    i = arguments.length,
    currentNode;
  if (!parent) return;
  if (!i) 
    parent.removeChild(this);
  while (i--) { 
    currentNode = arguments[i];
    if (typeof currentNode !== 'object') {
      currentNode = this.ownerDocument.createTextNode(currentNode);
    } else if (currentNode.parentNode) {
      currentNode.parentNode.removeChild(currentNode);
    }
    if (!i) 
      parent.replaceChild(currentNode, this);
    else 
      parent.insertBefore(currentNode, this.nextSibling);
  }
}
if (!Element.prototype.replaceWith)
  Element.prototype.replaceWith = ReplaceWithPolyfill;
if (!CharacterData.prototype.replaceWith)
  CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
if (!DocumentType.prototype.replaceWith)
  DocumentType.prototype.replaceWith = ReplaceWithPolyfill;


var template = document.querySelector('#template');
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1) { 
  var clone = template.children[0];
  clone.setAttribute('mid', 'test');
} else {
  var clone = document.importNode(template.content, true);
  var cmp = clone.querySelector('cmp-request');
  cmp.setAttribute('mid', 'test');
}
template.replaceWith(clone);
<template id="template">
   <cmp-request></cmp-request>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is a clever way to code this Angular HTML using just a single <a> tag?

<ul> <li ng-repeat="channel in Board.Channels"> <a ng-if="channel.key == ''" ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}">{{channel.title}}</a> <a ng-if="channel.key != '&apo ...

javascriptangularjs

Focused on individual characters in a string to implement diverse CSS styles

Is there a way I can apply different CSS classes to specific indexes within a string? For example, consider this string: "Tip. \n Please search using a third character. \n Or use a wildcard." I know how to target the first line with CSS using : ...

javascriptcssreactjs

Navigate to a particular date with react-big-calendar

I know this might sound like a silly question, but I am new to working with React. Currently, the React-big-calendar allows users to navigate to specific dates when selected from the Month view. What I want is for the same functionality to apply when a use ...

javascriptreactjsecmascript-6react-big-calendar

Execute a script when a post is loaded on a WordPress page

I am looking to have my jQuery script execute every time a post page is opened or loaded. I tried using echo in the script but it did not work. Where should I place the script to ensure it runs? single.php <script src="https://ajax.googleapis.com/aja ...

javascriptphpjqueryajaxwordpress

Explore in MegaMenu Pop-up

At my workplace, the internal web portal features a MegaMenu with a popup menu that includes a Search input field. The issue I am encountering is that when a user starts typing in the search bar and moves the mouse off of the megamenu, it disappears. It ...

javascriptjquerycursormouseeventmegamenu

Steps to Hide a Material-UI FilledInput

Trying to format a FilledInput Material-ui component to show currency using the following package: https://www.npmjs.com/package/react-currency-format Various attempts have been made, but none seem to be successful. A codesandbox showcasing the issue has ...

javascriptreactjsmaterial-ui

Updating a property in an object within an Angular service and accessing it in a different controller

I am currently utilizing a service to transfer variables between two controllers. However, I am encountering difficulties in modifying the value of an object property. My goal is to update this value in the first controller and then access the new value in ...

javascriptangularjs

Is there a feature in impress.js that allows for navigating to the following slide easily?

Impress.js is an innovative web presentation tool created with Javascript. I am interested in setting up custom events to navigate through the slides. This could involve adding buttons for "Next" and "Previous", for example. The impress.js file itself fun ...

javascript

Retrieve the latest inserted ID in a Node.js application and use it as a parameter in a subsequent query

I am currently working with an SQL database that consists of two tables, namely club and players. These tables are connected through a one-to-many relationship. Although the query in my node.js code is functioning properly, I am facing an issue retrieving ...

javascriptnode.jsexpress

Offspring's range remains unaffected by parent's range

I am facing an issue with my directives while trying to filter a table based on a select box. I have implemented ui.bootstrap to create an accordion for the form. However, when I click on the form, the parent scope does not change as expected despite using ...

angularjsangularjs-directiveangularjs-scopeangular-ui-bootstrap

What is the minimum required node.js version for my project to run?

Is there a command in NPM that can display the minimum required Node version based on the project's modules? ...

javascriptnode.jsnpm

If someone rapidly clicks on an AngularJS app, the page fails to load

Just a heads up - I am pretty new to Angular. Most of the code is from a tutorial on Lynda that I'm experimenting with. I've noticed an issue when I try to implement a type of "pagination" feature to display various elements from a data.json file ...

angularjsfrontendngroute

Tips on how child component can detect when the object passed from parent component has been updated in Angular

In the child component, I am receiving an object from the parent component that looks like this: { attribute: 'aaaa', attribute2: [ { value }, { value }, { value }, ] } This object is passed to th ...

javascriptangulartypescript

I am attempting to transmit an Error Object through an Axios POST request, but the server is receiving an empty Object

Hey everyone, I'm currently working on creating a Logging Microservice specifically for capturing frontend errors. The goal is to log all errors in a specific format like the example below: catch(err){ sendToLogs({message: 'Could not read input ...

javascriptnode.jsvue.jspostaxios

Steps to refresh a variable when the SMS read plugin successfully completes

I'm attempting to make a post call within the success callback of my SMS read plugin code. I can successfully print _this.otpnumber in the console. Please refer to my stack trace image link getSMS(){ var _this= this; var fil ...

javascriptangularsmsionic2

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

My situation involves a HTML table within a form that is being populated with Handlebars. I need to be able to select certain rows in the table using checkboxes, and upon form submission through a POST request in an Express.js framework, I require the JSON ...

javascriptjqueryhtmlexpresshandlebars.js

Achieve horizontal wrapping of div elements

Currently, I am developing a blog where search results for articles will be displayed within divs. The design of the website is completely horizontal, meaning that articles scroll horizontally. Creating a single line of divs is straightforward, but it&apo ...

javascripthtmlcss

Wait for response after clicking the button in Vue before proceeding

When the button is clicked for the first time and the data property is empty, I need to pause the button click code until an ajax response is received. Currently, when I press the button, both wait and scroll actions happen immediately without waiting for ...

javascriptvue.js

Is there a way to use JavaScript to rearrange the order of my div elements?

If I have 4 divs with id="div1", "div2", and so on, is there a way to rearrange them to display as 2, 3, 1, 4 using Javascript? I am specifically looking for a solution using Javascript only, as I am a beginner and trying to learn more about it. Please p ...

javascripthtml

Use npm to include a new dependency from the current dependency structure

I am currently working on a Vue application that utilizes both vuetable-2 and vue-axios. In my app.js file, I have the following imports: import Vue from 'vue' import VueMaterial from 'vue-material' import axios from 'axios' ...

javascriptnode.jsnpmnpm-install