So I saw this question over Stackoverflow couple of days ago and answered the author but I think its good to explain this topic further here.
by definition a custom tag is an HTML element that its properties are defined by programmers as opposed to the user agent.
basically, custom elements provide a tool for programmers to build their own DOM elements. Programmers can always use non-standard elements in their documents, with application-specific behavior added after the fact by scripting or similar, such elements have historically been non-conforming and not very functional. creating a custom element, we can inform the parser how to properly construct an element and how elements of that class should react to changes.
Draw backs of using custom HTML tags:
simply defining an element doesn’t mean that the element inherits all attributes and properties as you intended. for example if you create a <button-big></button-big> tag, that doesn’t mean that your newly created tag is suppose to act like a button.
In conclusion, the W3c group has created a list of officially support tags to ensure compatibility across devices (including screen readers). So leaning away from these standards are not only going to cause you headaches, it’ll also mean your users may have varied (and broken) experience. Unless you’re using a framework that will convert it to valid HTML later (like the AMP project with special AMP tags), it’s best to not to.