Behaviors are not recognized for existing elements #2
Comments
Hey, sorry I am replying so late! Thanks! :)
Thanks for pointing this out! For now, the script needs to be loaded first. (We can imagine it is like a browser API, which is supposed to exist at the beginning of the page load already). |
|
This needs to run before anything else, because it does some monkey patching to be compatible with ShadowDOM: https://github.com/lume/element-behaviors/blob/main/src/index.ts#L367 This should run before application code: <script src="https://unpkg.com/[email protected]/dist/global.js"></script>If any application code makes custom elements (and ShadowDOM) before this is loaded, it won't work in those cases because the lib won't be able to track the However, if |
|
Yes, so even putting your library first in the |
|
Hmmm. 🤔 Got a sample HTML file to reproduce it? The latest version to try with is currently Here is a complete HTML file with the script loaded in the <html>
<head>
<script src="https://unpkg.com/[email protected]/dist/global.js"></script>
<script>
class ClickCounter {
constructor(element) {
this.element = element
this.count = 0
}
connectedCallback() {
this.render()
this.element.addEventListener('click', () => {
this.count++
this.render()
})
}
render() {
this.element.textContent = `count: ${this.count}`
}
}
elementBehaviors.define('click-counter', ClickCounter)
class ClickLogger {
constructor(element) {
this.element = element
}
connectedCallback() {
this.element.addEventListener('click', () => {
console.log('clicked on element: ', this.element)
})
}
}
elementBehaviors.define('click-logger', ClickLogger)
</script>
</head>
<body>
<button has="click-counter click-logger"></button>
</body>
</html> |
|
@jon49 By chance are you using Working on a fix, so that any |
|
Yes, I guess that is what I was trying to say. Is that only when I load the behaviors before the HTML elements will the behaviors work. Otherwise they are ignored. So, good to hear you are working on the fix. Granted the way this library works depending on what you are doing it is nice to do the behaviors ahead of time :-). But I could see wanting them after the fact too if an immediate visual component is not needed. |
|
Yeah, it should at least be like custom elements where we can define them later, and at the later point they will run on any pre-existing elements. A use case could be, for example, loading JS after a client-side page switch, and the JS comes in after the new elements are already in view. |
Hi,
First of all, thanks for this library. I really love the concept and it is a nice, logical extensions of custom elements.
However, I found that the behaviors do not work if the element is added before the library load. The scripts we are using are automatically added as "defer" scripts to load in a non-blocking way (we do not have control over the loading mechanism of the scripts).
Is this a known issue of the library? Unfortunately if that's the case I likely won't be able to use the library, but I hope this will give some ideas to browser implementers :).
The text was updated successfully, but these errors were encountered: