Menu
it looks like it does not work.
Please note i am referring to custom elements v1 as mentioned here: https://developers.google.com/web/fundamentals/getting-started/primers/customelements
on my site I in the javascript console, I see
SCRIPT1002: Syntax Error, NewInvite.js Line 1, Column 1
Where the first line in NewInvite.js is
class NewInvites extends HTMLElement
Note: I am not referring to 'polymer' or 'web components'
Lastly, site runs fine on safari, mobile safari, and chrome
842
We can create custom HTML elements, described by our class, with its own methods and properties, events and so on. Once a custom element is defined, we can use it on par with built-in HTML elements. That's great, as HTML dictionary is rich, but not infinite.
Steps involved in creating a Custom HTML Element:Create a new Class representing the New Element (ES6) Extend the class from “HTMLElement” Add “connectedCallback” function to the class to access DOM Element when the element is added to the document. Access the Custom DOM Element using “this” keyword.
Web Components consist of three separate technologies that are used together: Custom Elements. Quite simply, these are fully-valid HTML elements with custom templates, behaviors and tag names (e.g. <one-dialog> ) made with a set of JavaScript APIs. Custom Elements are defined in the HTML Living Standard specification.
The functionality of a custom element is defined using an ES2015 class which extends HTMLElement . Extending HTMLElement ensures the custom element inherits the entire DOM API and means any properties/methods that you add to the class become part of the element's DOM interface.
If you're willing to use a few polyfills and a little extra boilerplate for each component, you can actually write v1 compatible custom elements in ES5 (without classes) that will work in IE11.
Based on this comment on github you can use regular functions to define your custom elements, and then just make sure to call Reflect.construct inside the component's constructor.
function MyEl() {
return Reflect.construct(HTMLElement,[], this.constructor);
}
MyEl.prototype = Object.create(HTMLElement.prototype);
MyEl.prototype.constructor = MyEl;
Object.setPrototypeOf(MyEl, HTMLElement);
MyEl.prototype.connectedCallback = function() {
console.log('my-el connected');
};
customElements.define('my-el', MyEl);
document.body.appendChild(document.createElement('my-el'));
See this post for a full working example.
114
Looks like the answer is 'No' and 'Edge' which is meant to replace 'internet explorer' is still undecided, but you can vote on it here
https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/6261318-html-imports
According to Wikipedia only 10% of people use internet explorer anymore, so probably just easier to say "this site does not support Internet Explorer" instead of writing your website twice -
https://en.m.wikipedia.org/wiki/Usage_share_of_web_browsers
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
