Tag: HTML

What do you do when you need a widget-like functionality? At present, there is a whole generation of developers who, as a rule, are googling for ready-made jQuery plugins. Can’t we do better than that? With the advances of web-components, we are expected to compose UIs from these building blocks. They are many. One can find one for almost any task. They are highly customizable. One can reuse the functionality, but with your own original representation. They are isolated. One doesn’t need to worry about the collisions in the compound system. But in reality, the APIs required by true web-components still have poor support in user-agents. One has to load an emulator library like Polymer. When it comes to component-based frameworks, one can painlessly import a component or rather go with a set like Material UI. But what would you say about standardized, library/framework-agnostic solution with not dependencies? Interesting that with HTML 5.1 and HTML 5.2 we get a number of new functional elements, solving classic developer tasks such as dialog, expandables, date pickers, and others. At the time of writing this article, the support for spec among browsers isn’t that good, but the elements can be polyfilled where it lacks. Let’s see what’s available and how we can use it.
Expandables With Summary/Details
A pair of elements, details and summary, were introduced in HTML 5.1 and are now widely supported. They implement a disclosure widget that can be adopted for collapse, dropdown menus, tree navigation, and other tasks. By default, any child elements of details except summary are hidden. As one clicks summary, the properties of open details change to true and the hidden content comes into view. To put it in practice, we made the following HTML:

Link: https://dzone.com/articles/building-real-life-applications-with-functional-el?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev