Comments (10)
Hi, I found the way to solved the problem by change my script.
document.registerElement('hi-table', { prototype: HiTable, extends:'table' } );
...
var tblObj = document.createElement('table', 'hi-table');
any idea why it has to be so?
from document-register-element.
Hi @MagicJack , first of all thanks for using github instead :-)
So here the thing … there are two ways, as you've realized already, to create Custom Elements
- the one using a tag with at least a dash in the name,
x-bla
,my-table
- the one using the
is
attribute
The main difference between these two methods is that the second one never requires Shadow DOM.
You can think about input
, if you create a my-field
element from HTMLInputElement
prototype but you chose your own my-field
name instead of input
with is
attribute as my-field
, you will not see the input
the way you expect, you'll rather see an empty space.
In order to create same input functionality you need the Shadow DOM behind the scene or you can manually inject the input at runtime or you create an <input>
, and you use is
attribute with your registered class.
I believe same applies for table
element, and generally speaking all elements that are not already recognized by the browser and have a different behavior from HTMLElement
or HTMLUnknownElement
.
However, I've no idea why the code was failing and I'd like to understand if it's a IE only thing or if it's the same in every browser but the short answer to your problem is: use this form for elements with a special behavior
document.registerElement('hi-table', { prototype: HiTable, extends:'table' } );
var tblObj = document.createElement('table', 'hi-table');
document.registerElement('hi-input', { prototype: HiTable, extends:'input' } );
var tblObj = document.createElement('input', 'hi-input');
I hope this help, feel free to close this bug after whenever you want (or ask more)
from document-register-element.
Hi, @WebReflection:
- I test the code of my 1st post on chrome v36.0.1985.143 m, I got the same error as IE. They both stop at the function
createCaption()
when I create a newht-table
object.
on chrome I got 'Uncaught TypeError: Illegal invocation'
on IE10 it's a simular error message in chinese. - I also try to rewite the workable code in the style you've posted, as below.
But, it does not work! (what happen ?!?)
document.registerElement('hi-table', {
prototype: Object.create(
HTMLTableElement.prototype, {
setNamePref: { value: function() {
this.namePref = namePref;
}},
insertHiRow: { value: function() {
var rowObj = document.createElement('tr', 'hi-row');
var tbObj;
rowObj.init(this.namePref, idx);
if (this.tBodies.length==0) {
this.appendChild(document.createElement('tbody'));
}
tbObj = this.tBodies[0];
while (idx > tbObj.childNodes.length)
tbObj.appendChild(document.createElement('tr'));
if (idx == tbObj.childNodes.length)
tbObj.insertBefore(rowObj);
else
tbObj.insertBefore(rowObj, tbObj.childNodes[idx]);
return rowObj;
}}
}),
extends: 'table'
});
...
var tblObj = document.createElement('table', 'hi-table');
from document-register-element.
It would help a lot if you could actually write some code I can test … so many thing missing up there … setNamePref
has no parameter, no idea where namePref
comes from. Rest of the logic I don't know what it does, where is hi-row
defined or anything else but for sure nothing happened since last time you told me that other form was working … no commits in here 'cause I don't know what to fix exactly.
The illegal invocation
makes sense to me if you consider what I've said about inherited behavior VS "same kind of DOM node" which is the case of the is
attribute.
from document-register-element.
I've added a test that use createCaption
without problems. I will close this bug but feel free to ping me back if you have other questions.
Note: nothing actually changed in the code, not sure why your one is failing.
from document-register-element.
P.S. bear in mind that registration order matters … if you need hi-row
inside hi-table
you should register hi-row
before the table one. Just in case that was your last issue.
from document-register-element.
OK, Thanks.
I find my bugs. Both code styles can work (thanks for the hint that setNamePref
has no parameter).
also, after some testing, I got 2 conclutions:
1.If I'm just extending HTMLElement
then create an object of what I'm registered (say some other than hi-table
and hi-row
of my code) will work fine.
2. If I want to extend HTMLTableElement
or HTMLTableRowElement
or anything else that's derivation of HTMLElement
, the only possible workable combination is as below
(Still, I don't know why it has to be so.)
var HiTable = Object.create(HTMLTableElement.prototype);
...
document.registerElement('hi-table', { prototype: HiTable, extends:'table' } );
...
var tblObj = document.createElement('table', 'hi-table');
- Have to create the prototype by the derivated one
- Have to register with
extends:
- Have to create the element by orginal with extension
The combination is still true when using the native suport of chrome v36
The codes below are what I used for the testing.
<!DOCTYPE html>
<html>
<head><title>test of registerElement</title>
<script type="text/javascript" src="registerElement-max.js"></script>
<script type="text/javascript">
var HiElement = Object.create(HTMLElement.prototype);
HiElement.func1 = function func1() {
alert("This is function1 Hi-Element");
}
HiElement.func2 = function func2() {
alert("This is function2 Hi-Element");
}
document.registerElement('hi-element', { prototype: HiElement } );
// var HiTable = Object.create(HTMLElement.prototype); // Not workable
var HiTable = Object.create(HTMLTableElement.prototype);
HiTable.func1 = function func1() {
alert("This is function1 of Hi-Table");
}
HiTable.func2 = function func2() {
alert("This is function2 of Hi-Table");
}
document.registerElement('hi-table', { prototype: HiTable, extends:'table' } );
// document.registerElement('hi-table', { prototype: HiTable } ); // not workable
function fnInit() {
var elemObj = document.createElement('hi-element');
elemObj.innerHTML = "Hello World";
elemObj.func1(); // OK
var iPt = document.getElementById('insPt');
iPt.appendChild(elemObj);
// insertAdjacentHTML() belongs HTMLElement
elemObj.insertAdjacentHTML('BeforeBegin', 'BBHeader[');
elemObj.insertAdjacentHTML('AfterEnd', ']');
// var tblObj = document.createElement('hi-table'); // This make createCaption() fail
var tblObj = document.createElement('table', 'hi-table'); // This OK
// This fail if registerElement() without "extends:'table'"
// In chrome v36: tblObj.func1() is undefined
tblObj.func1();
// This fail if createElement() without extendsion
tblObj.createCaption();
tblObj.caption.innerHTML = "The Table Header";
iPt.appendChild(tblObj);
}
window.addEventListener('load', fnInit);
</script>
</head>
<body>
Before The Insert Point
<div id="insPt"></div>
After The Insert Point
</body>
</html>
from document-register-element.
Thanks for the code and the clarification, my last question would be: is Chrome native producing same results? If yes, we are good .. if not, I might put a big warning in the front page … however, I think the is
attribute js the preferred way in any case for backward compatibility, hopefully not a big deal … or you can still do something like:
var HiTable = Object.create(HTMLTableElement.prototype);
HiTable.createdCallback = function () {
this.table = this.appendChild(
document.createElement('table')
);
};
document.registerElement('hi-table', { prototype: HiTable });
And use the internal table instead
from document-register-element.
Yes.
Chrome native, Chrome + extension code and IE10 + extension, they produce same results.
Maybe I'll try IE9 and IE11 later.
I think you could add another example for people who want to add extends the derivation of HTMLElement
not just HTMLElement
itself.
from document-register-element.
added example and explanation.
Best Regards
from document-register-element.
Related Issues (20)
- LifeCycle events order of nested custom elements inconsistent across Chrome and Firefox HOT 18
- Built-in elements don't work in Firefox HOT 6
- TypeError: new.target does not define a custom element HOT 3
- document.registerElement is deprecated and will be removed in M73 HOT 3
- Post-install script slowness HOT 3
- appreciate your feedback for custom element diagram HOT 8
- [Uncaught DOMException: Failed to execute 'registerElement' on 'Document'] when used in Chrome Extension HOT 16
- Functions are not evaluated in connectedCallback HOT 1
- `this` reference in contructor broken HOT 14
- Multiple instances of the polyfill leads to unexpected behaviour HOT 1
- error ""Failed to construct 'HTMLElement': Please use the 'new' operator"" when using with Angular/elements 8.2.0 HOT 2
- Refreshing a document inside an iframe which loads d-r-e breaks the polyfill and leaves document.createElement as undefined HOT 15
- `attributeChangedCallback()` bound value is invalid HOT 15
- Add DRE to Polyfill.io service HOT 1
- [QUESTION] Unable to get property '_isMounted' of undefiened. HOT 1
- TypeError - Object doesn't support property or method 'registerElement' HOT 3
- Time to compare again? (webcompents/custom-elements) HOT 2
- Polyfill does not seem to be working in IE 11 HOT 6
- postinstall fails in noexec enviornment HOT 1
- We unable to install latest version @1.14.7 HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from document-register-element.