How to add Custom attribute like Hidden

Question

I have created Custom elements window.customElements.define('ctl-button',CTLButton)

<ctl-button></ctl-button>

I was searching on How to add custom attribute like hidden in HTML tag.

For eg.

<ctl-button red dismiss></ctl-button>

Red - Will add red color to Background color.

Dismiss - Will hide the button after it is clicked.

Styling element one is supposed to use CSS and _classes_, not invent your own attribute (and if still do, they should be prefixed `data-*`). For hiding an element, toggle the existing [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) attribute when clicked — Asons, Oct 02 '19 at 08:11

score 2 · Accepted Answer · answered Oct 02 '19 at 08:07

2

Assuming you are aware this will never be valid HTML and should never be used in a real world application.

To add the styling you could only use CSS like so

ctl-button[red] {
   background-color: red;
}

ctl-button[dismiss] {
   display: none;
}

<ctl-button red dismiss>dismissed</ctl-button>
<ctl-button red >yyyy</ctl-button>

answered Oct 02 '19 at 08:07

caramba

Sorry, I am new to Web Development and I wonder what problems this would created if we start using this in HTML ? Could you please tell me? – Perseus Oct 02 '19 at 08:20
BTW, thanks for sharing, I see this can be done using CSS Attribute Selectors. – Perseus Oct 02 '19 at 08:20
1

@Perseus problems which could occur are: it brakes the rest of your HTML. See every browser trys to do the best to make your HTML look good and work. But if you use elements which do not exist it could brake the rest in terms of wrong distance from one element to the other and worst case your element is not even visisble even though it should. Try to stick with the given tags which are many! See this list and use one of them according to your needs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element – caramba Oct 02 '19 at 09:01

1 Answers1