Comments (5)
Incremental DOM's current API does not support is
directly, though a new one could be added in the future. While this is standard, I think the API is still a bit contentious, and I would like to see all major browsers adopt this before making an API change to support this functionality first class.
There are currently two options if you need to create such a custom element. Given a custom element definition:
class MyList extends HTMLUListElement {
constructor() {
super();
}
}
customElements.define('my-list', MyList , { extends: "ul" });
- If you have the element definition, pass the constructor to Incremental DOM:
elementOpen(MyList, key, statics);
...
elementClose(MyList);
- If you don't have the element definition (e.g. need to asynchronously load the definition):
function MyListConstructor() {
return document.createElement('ul', { is: 'my-list' });
}
elementOpen(MyListConstructor, key, statics);
...
elementClose(MyListConstructor);
The second is a little inefficient in that it creates an extra object that gets thrown away immediately (when Incremental DOM uses new
), but the cost is likely not a big deal compared to the element creation itself.
from incremental-dom.
The second case is actually a blocker, if we persist that extended custom element state. With the next patching the state is lost.
Ah, it doesn't pick it up as a matching node. You can do:
function MyListConstructor() {
return document.createElement('ul', { is: 'my-list' });
}
MyListConstructor.prototype.toString = function() {
return 'ul';
};
Unfortunately, there doesn't seem to be a way to distinguish this from a plain <ul>
as far as DOM diffing goes. So if you had a <ul>
adjacent, they could get reused depending on the control flow. As a result, I would strongly recommend enforcing usage of a key
if you are going to use this pattern. Note that keys do not need to be unique anymore, so all your instances of the extended custom element can share the same key.
from incremental-dom.
The second case is actually a blocker, if we persist that extended custom element state. With the next patching the state is lost.
from incremental-dom.
Actually, looking at it again, the toString
is only needed if you server-side render the extended element. If you client-side render it, it should reuse the element correctly.
If that is not the case, do you have an example where the element is not being reused?
from incremental-dom.
My bad, I overlooked that I should’ve passed the same function each render call. It works like a charm, thanks for your reply.
from incremental-dom.
Related Issues (20)
- Element Events list HOT 2
- Is Angular 8 Ivy render engine going to effectively replace this project? HOT 2
- Ignoring certain attributes HOT 6
- Update dependencies to remove security warnings
- Issues with webpack and babel HOT 3
- Document: `elementVoid` is incorrect. HOT 2
- Setting prop using Boolean (to trigger prop over attribute) always sets true HOT 7
- DocumentFragment support HOT 5
- Create function loses content HOT 2
- [Performance Advice] Patching to single element or custom elements HOT 16
- Runnable in jsdom (server side rendering)
- Add a module build HOT 2
- Twing implementation HOT 6
- Relationship to Lit / Polymer? HOT 5
- Do not publish ts sources to npm HOT 4
- CDN version not up to date. HOT 2
- Test not launching on macOS 11.2 / Chrome 89
- Details disclosure element <details> adds and removes "open" attribute outside of incrementalDOM HOT 2
- [Performance Advice] `key` parameter for `text()` function
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 incremental-dom.