What is the difference between native and custom widgets?

First, let's define a widget. A widget is simply put, an interactive element. A widget displays information and expects the user to act in some way. A few examples of widgets are accordions, buttons, links, checkboxes, sliders, etc.

Native widgets are widgets that use defined HTML5 elements, such as <button>, <input>, <select> or <textarea>.

Custom widgets are widgets that are built using <span> or <div> elements, or where a native element is used in a way other than it's defined spec. An example would be a <button> element being used as a link. Since it no longer functions as a button, it is considered a custom widget (it would also need the role="link" attribute and an aria-label attribute in order to be accessible).