Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IE11 not working #7

Closed
dschulten opened this issue Feb 4, 2018 · 5 comments
Closed

IE11 not working #7

dschulten opened this issue Feb 4, 2018 · 5 comments

Comments

@dschulten
Copy link

dschulten commented Feb 4, 2018 •
edited
Loading

I have tried to get a custom element with shadow dom running in IE11. When my bundle contains transpiled ES5 classes, IE11 complains about an "invalid calling object" on this line:

attachShadow: function attachShadow(init) {
                // https://dom.spec.whatwg.org/#dom-element-attachshadow
                if (!init || init.mode !== 'open' && init.mode !== 'closed') {
                    throw _utils2.default.makeDOMException('TypeError');
                }

                if (this.namespaceURI !== 'http://www.w3.org/1999/xhtml') {    // <-- invalid calling object
                    throw _utils2.default.makeDOMException('NotSupportedError');
                }

Here is how my webcomponent bundle calls attachShadow:

var CartApp = (function (HTMLElement) {
	function CartApp(options) {
		HTMLElement.call(this);
                // ...
		this.attachShadow({ mode: 'open' });

If the bundle does not contain ES5 transpiled classes, IE says of course that class XXX is a syntax error.

With which kind of webcomponent were you able to get it to work in IE11? You only mention that a Promise polyfill is required, is there anything else?
@dschulten dschulten mentioned this issue Feb 9, 2018
Closed
@tuespetre
Copy link
Owner

My bad, I had missed this issue.

@tuespetre
Copy link
Owner

Here is a simple demo I put together, you can try saving it into an html file and viewing it:

<body>

<script src="https://rawgit.com/tuespetre/shadow-dom/master/dist/shadow-dom.js"></script>

<script>
    // Hand-written ES5-style class    

    function myElement () {
        var self = HTMLElement.call(this);
        self.attachShadow({ mode: 'open' });
        return self;
    };

    myElement.prototype = Object.create(HTMLElement.prototype, {
        'constructor': {
            value: myElement,
            writable: true,
            configurable: true
        }
    });
    
    window.customElements.define('my-element', myElement);
    
    var instance = new myElement();
    document.scripts[0].after(instance);
    instance.shadowRoot.innerHTML = 'Hello from shadow DOM';
</script>

</body>

It would appear that the key difference is how the transpiled constructor is written. You have to use var self = HTMLElement.call(this) and then manipulate/return self rather than this. This pattern can be achieved manually as in this example, or the way Babel transpiles is also compatible with it.

@dschulten
Copy link
Author

I was able to get my component running in IE11 and Chrome, the latter with shadow-dom, the former with shadow-dom polyfill. I had to change the code above to:

function App(options) {
		if ( options === void 0 ) options = {};

		var self=HTMLElement.call(this);
		init(self, options);
		self._state = assign({}, options.data);

		self.attachShadow({ mode: 'open' });

		self._fragment = create_main_fragment(self._state, self);

		self._fragment.c();
		self._fragment.m(self.shadowRoot, null);

		if (options.target) { this._mount(options.target, options.anchor || null); }
		return self;
	}

@dschulten dschulten mentioned this issue Feb 11, 2018
Closed
@dschulten
Copy link
Author

Thank you very much - I think this can be closed.

@dschulten
Copy link
Author

When transpiled with babel, my component runs fine in IE11: https://github.com/dschulten/svelte-ce-sd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dschulten @tuespetre