-
Notifications
You must be signed in to change notification settings - Fork 88
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.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
define: extend built-in elements #34
Comments
The hybrids does not support extending built-in elements for two reasons:
However, it doesn't mean that you are out of luck. Even though you can't create custom element using const MyButton = {
render: () => html`
<button>...</button>
`,
}; A |
@smalluban Indeed, the correct constructor has to be specified. Though we need and use it for custom tables, so that we can benefit from |
Using extended built-ins is limited. For example, table elements don't support Shadow DOM, so building custom tables using them is rather hard to implement. You can't change styles, internal structure, etc... The only thing that you can is adding custom JavaScript logic (new methods, event listeners, behaviors). It is not a real use case for hybrids library. Also, the whole "is" idea is quite complex and creates a lot of edge cases. That is one of the reasons why Safari might refuse to implement it. Closing issue. Fill free to re-open if you have any additional questions about the subject. |
Thanks for your quick answer. Indeed, extended build-ins and the IMHO it's a super important feature to extend existing elements, not only in regards to SEO, accessibility, semantics, but also developer effort. May I ask you to consider this feature and reopen this issue. |
I went through the article you provided, and only what I can see there is a lot of hate. I disagree with most of the arguments. V1 version of the Shadow DOM and Custom Elements API is widely supported, and polyfill for Shadow DOM V1 is working (look at the tests results), unlike the V0 version, where it was hard to implement, as for example, you could have multiple shadowRoots. Styling is not so complicated as he claims, and shadow DOM finally introduced real encapsulation, not a fake one - for example using The other thing is a hybrids architecture. It was my well-thought-out decision about using plain objects for the definition. It disallows extending custom constructor for the class definition. Let's take simple composition example. If you have const ElementA = {
property: ...
};
const ElementB = {
...ElementA,
otherProperty: ...,
}; The composition is broken now - one of the principles of the hybrids. An object with property descriptors can't be related to the custom element base class. There is no place for that. Custom Element API is very flexible, and if you stick to standards, you can create them with any library or even without them. They will still be able to work together. If you really need to extend built-in elements, you should find another tool for that. |
@smalluban I see your points of view. Though I'm convinced that extending built-ins is a valid concept too. |
I really like the concept.
Can I use
define
to extend existing build-in elements like<button>
?The docs seem to only support autonomous custom elements 馃
https://hybrids.js.org/core-concepts/definition
The text was updated successfully, but these errors were encountered: