In HTML, all elements share a set of global attributes, like class, id, the data- specification, a common set of Javascript events and a couple of things here and there.
But how about SVG? I'm trying to build a trait in PHP able to represent the very core of a SVG element (so I can build every SVG object with this core set of attributes and add the specific attributes for that object in its own declaration).
The SVG section in the Mozilla Developer Network has a full-blown page with lots of attributes, but the only core attributes, according to their documentation, are id, xml:base, xml:lang, xml:space
I see the class attribute is on the navigation links, but not referred in the attributes category section, which confuses me a lot.
Isn't the class attribute a global one like in HTML? And what about the Javascript events?
The class attribute is not global feFuncA doesn't have it for instance, nor does that element support javascript events. There are others.
Attributes are listed here in a list that shows which elements support them.
Related
One of the brilliant features in Vue.js is the ability to assign new attributes to a specific element in the template. known as Transparent Wrapper Components
In this sample, I can send all existing HTML attributes to a specific element. (in here with v-bind="$attrs" for input)
How to assign all existing HTML attributes to a specific element of a template without coping as binding property in Angular 6+?
I don't think you can do this out of the box, and I think that is by design.
Its kind of ugly but I got similar functionality writing a BindAttrsDirective here:
https://stackblitz.com/edit/angular-bind-attrs
Note: won't support SSR
Can anyone guide me about this? Can Stencil.js add Custom attribute / Directive like Aurelia/Angular to existing elements or not?
I don't find any doc about this on their site. Only creating a new component nothing about extending existing elements.
I want to add a custom attribute to div or any HTML element Is it possible in Stencil.js?
Attribute-based components aren't possible with Stencil. The library implements the Custom Elements spec, which only works with tags.
Extending existing elements isn't supported either. The spec allows extensions of builtins, but it isn't implemented in Stencil and browser support is limited.
I've recently found on one of the sites opening tag like this:
<script data-ip="93.1xx.3.2x" data-backuri="something.com">
And I couldn't find any information about it. What are those tags used for?
data-* attributes are custom HTML attributes.
Basically, there are standard HTML attributes like style, src, width, height, class... and these have a special meaning to browsers and are 'reserved'.
However, custom attributes have no special meaning generally and are only special to the owner's application. They can be used to simplify an application's logic.
Using data- before your attribute name ensures that future standard attributes will not use your current attribute. For example, imagine today you are using a sound attribute but then the HTML standard adds a sound attribute meaning something other than what you meant. Had you used data-sound, you would have been fine because there would be no conflict. The specification says no future standard browser attributes will start with data-.
See jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity for some useful info on why we use data-* attributes.
Also, see MDN docs for some useful information.
I built an application using Polymer and its working as intended. I'd like to style it with a totally custom look and feel.
Is it possible to disable default styling of Polymer elements via a flag or some roundabout way, or will I have to manually override everything I want to change?
To override an element's styles from the outside, you can use ::shadow and /deep/:
http://www.polymer-project.org/articles/styling-elements.html#style-fromoutside
Those pierce through the Shadow DOM boundaries and allow you to target nodes internal to the element. Unfortunately, this means you need to explicitly write rules that target these nodes. This is sort of the deal with components...an author defines the look and feel, but you're welcome to override it as consumer/developer.
It's also worth noting that the visual elements use the non-visual core-*/polymer-* elements to get their job done. If you need a completely different UI, I'd create an element that reuses those core elements.
As I've gotten deeper into using jQuery with various sites I've worked on, I've found that I can get lost on whether a class attribute value is appended to an element in the DOM in order to attach an actual CSS style, or to bind an event to it. As such, I've started leaning towards using the rel attribute on anchor tags to denote if something is going to be bound to an event, keeping the class attribute specifically for stylization. (I've not delved into this deep enough to determine if there are any drawbacks or fundamental flaws with this approach, however, and am open to comments & criticisms on it.)
It got me to thinking that others must have similar things they do to help keep their code organized, and I'm interested in learning about some new ideas that might be floating around out there.
Usually this is not much of an issue for me, even in medium sized projects.
I usually assign classes for styling, and I often end up using same selectors in JS code.
Semantically speaking, the rel attribute is not an appropriate way to store data. As it should point out the relation of a link to the target.
HTML5 makes things more flexible with data- custom attributes.
You use the class attribute when you have multiple HTML elements that have shared presentation or shared behavior.
So if you have several buttons for which you want to use the same event handler, then you give those buttons a class and then use JavaScript to select those elements (by class) in order to set the handler on them (you use a JavaScript library which has a selector engine). For example, in jQuery:
$(".addButton").click(function() {
// the event handler
});
Classes are used both for CSS styling and JavaScript manipulation.