-3

How do i go about creating a custom HTML element that acts like a link with out using inline Javascript

For example:

<x-button href="...">...<x-button>

Is it possible to create an element like <x-button> that will take an attribute such as href the same way an a element would?

eel
  • 1
  • 2
  • 1
    So what is your question exactly? How to make a link? Could you be more clear about the problem? – Granny Oct 03 '17 at 11:45
  • This is far too broad for SO's format. For the first, look into [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). For the second, you'd just use a `click` event handler to set the `location` to the destination URL (but beware that unless you do a lot of styling on that button, that would be a surprising user experience -- use links for links, buttons for actions). – T.J. Crowder Oct 03 '17 at 11:46
  • "I had an idea" isn't a question. Have you attempted to *implement* your idea? Is something not working? What were you expecting to happen? Why? – David Oct 03 '17 at 11:47
  • You can find your question's answer in [here](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link). – Secil Oct 03 '17 at 11:52
  • The question is quite clear, no need for overthinking, I want to add an attribute to an HTML element, whether it is a custom element or a standard element. – eel Oct 03 '17 at 11:58
  • @Vlad: Ok, then add one. Observe: https://jsfiddle.net/rh1hyyrj/ What's stopping you from doing this? What happens when you *try*? – David Oct 03 '17 at 12:17
  • @David: https://jsfiddle.net/zv5zmsqr/2/ – eel Oct 03 '17 at 12:43
  • @Vlad: Your custom element successfully displays in that example. What's the problem? – David Oct 03 '17 at 12:44
  • @David: It does not display as a link, its displayed just as an unknown element, i want to achieve the same behavior as a element for my custom element – eel Oct 03 '17 at 12:46
  • @Vlad: It does not display as a link because it's not a link. You'd need to write your custom behavior through a combination of JavaScript and CSS. For example, you can style that element to have a different color, an underline, and a different mouse cursor on hover so as to mimic the appearance of a link. And you can respond to its click event in JavaScript and perform a redirect to as to mimic the behavior of a link. But no browser existing browser is going to support custom behavior that you're making up right now. – David Oct 03 '17 at 12:49

1 Answers1

0

The HTML element don't support every attribute. If you want a button acting like a link, you can use directly the <a href="#"></a> element and add some css on it too look like a button.

  • Yes but that's exactly what I don't want. I want to add that attribute to a custom element that will act as a link. – eel Oct 03 '17 at 11:52
  • Well you can also direcly wrap it like: or a ink looks like a button https://jsfiddle.net/v6nnapvb/1/ –  Oct 03 '17 at 11:57
  • Well, again... this beats my whole idea of a custom element. I don't want to use existing methods, I want to create a custom HTML element with a href attribute, or if possible, extend an existing one to include this attribute. – eel Oct 03 '17 at 12:02
  • I don't really get it. You want to create a custom HTML element ? And what do you want to do ? –  Oct 03 '17 at 12:03
  • A custom element doesn't exactly act like a link, it acts more like a div, just a container with no real purpose, adding a href="..." won't do anything, but I know that its possible somehow to add that attribute in the elements API I suppose, Or is it? – eel Oct 03 '17 at 12:08