In React.DOM.Props from purescript-react, DOM node attributes are nearly exhaustively listed there, except for a class attribute (I'd suspect it to be named _class, similar to _type for Purescript's syntax issue). I tried to make my own with
_class :: String -> Props
_class = unsafeMkProps "class"
And attempted to use it, but after inspecting the HTML, React didn't include the attribute! Why is this? Why can't I use a class attribute in my DOM nodes?
You probably want to use className here and not class. This is done to prevent confusion between a JavaScript class and the DOM attribute class.
Here's what the official documentation says:
To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like <div>, <a>, and others.
It is actually even listed in the page you're linking to, here
className :: String -> Props
Related
MDN says:
If you want default content for your , you enter it between the opening and closing tags. does not support the value attribute.
but in angular property binding we can bind to value.
<textarea rows="10" [value]="'test'" ></textarea>
is there any online repository where we can find all the properties with regard to angular.??
I found the article "HTML Attributes vs DOM Properties and Angular 2 Data Binding" useful, especially the following sections:
DOM is basically collection of objects (window,html,body, head and etc) which allows us to manipulate it. It means that HTML elements are contained in the DOM as objects.HTML elements have attributes which initilizes DOM properties. Once initilization process is done attributes job is done.
<input type=”text” value=”5">
Given input element has type and value attributes. When HTML element is created its properties which have similar names to attributes (but not same thing) is created, too. After initilization given input element have properties such as type and value.
Angular property binding acts on the elements/objects contained in the DOM. You can find a list of properties of all element interfaces at MDN Web APIs documentation. Most of the one's you're interested in, have a name that starts with 'HTML'.
The HTMLTextAreaElement interface for example corresponds to the <textarea> element. You can use all its properties and the properties of its parent interfaces for Angular property binding as long as they're not read only.
I'm reading some code and there is a piece of html that reads:
<div id="uniqueId1234" data-target=".uniqueId1234">
...
</div>
and then earlier on in the same html file there is a span element that seems to use this div as a class:
<span class="uniqueId1234">
...
</span>
Can someone explain how this works? I thought that a class was something created in a css file. Sorry if this is a dumb question.
This is likely part of some piece of Javascript code or a library that listens for some type of change or event on your element with the data-target attribute.
When this event is triggered, it can then use the value of that attribute as a selector for performing some other logic as seen in this basic jQuery-based example below:
// When an element containing your data-target attribute is clicked
$('[data-target]').click(function(){
// Find the appropriate target (i.e. ".uniqueId1234")
var target = $(this).data('target');
// Then use it as a selector for some type of operation
$(target).toggle();
});
Classes are very common within CSS to style multiple elements, but they can also commonly be used as a mechanism in Javascript as well, which is likely the case in your scenario here.
What does it mean to set data-target attribute of a div to the id of that div?
Nothing standard. data-* attributes are designed to hold custom data for custom code (typically client side JS) to process.
I thought that a class was something created in a css file.
Classes are an HTML feature used to put elements into arbitrary groups. They are commonly used when writing CSS, but also client side JS and other code.
I am new to polymer and keep seeing the "is" property, but never get a thorough explanation of it. Example :
<script>
Polymer({is: "some-property"})
</script>
or
<template is="dom-repeat"></template>
It seems to be a declaration of inheritance or the like and i sorta get it but would like to find a clear explanation.
Per the documentation:
To register a custom element, use the Polymer function, and pass in
the prototype for the new element. The prototype must have an is
property that specifies the HTML tag name for your custom element.
In this case, the
<template is="dom-repeat"></template>
is a specific custom element built-in to Polymer.js, which extends the native HTML template element.
When working with custom HTML elements in web components, should I still name custom attributes with the prefix data?
For example:
<!-- Should form be data-form? -->
<my-button form="foo">click me</my-button>
No, that's not necessary.
Existing HTML elements have a defined set of attributes, which means you would invalidate the HTML by just adding any attribute. By introducing the data- attributes, it was made possible to extend existing elements without invalidating them.
Web components are custom elements. They have no defined set of attributes, you define them yourself. Whether or not you use data- attributes is completely up to you, but you don't have to. Your component cannot become invalid because there is no definition of valid for it.
If you care about semantic/valid HTML, this answer may be relevant to you too: Are custom elements valid HTML5?. In short: use a dash in your component name to make sure it's picked up as valid HTML.
In general, there is no difference between custom elements and predefined. You might create an element of your choice with document.createElement and register it with document.registerElement. The result would be:
console.log(document.createElement('my-button').constructor);
//⇒ function HTMLElement() { [native code] }
console.log(document.registerElement('my-button'));
//⇒ function my-button() { [native code] }
console.log(document.createElement('my-button').constructor);
//⇒ function my-button() { [native code] }
As you could see, once registered, the element is awarded with it’s own constructor. That provides an ability for components to behave in it’s own way. But:
console.log(document.createElement('my-button').__proto__.__proto__);
//⇒ HTMLElement
is still a good old plain HTMLElement. So, the rules for attribute naming were not changed.
Please note, that libraries, like polymer, might add additional attribute handling; the above is true for plain web-components only.
I have seen this code from the tutorial that I'm studying. I searched for the purpose of the p attribute inside the li tag but found no answer. What is the purpose of that p attribute inside the li tag?
$msgs .= "<li p=\"$no_of_paginations\" class=\"inactive\">Last</li>";
The purpose cannot be inferred from the code snippet. As such, the attribute, being not defined in any HTML specification or draft or browser-specific extension, has no effect beyond being stored as data into the p element node in the document tree.
Such an attribute, though invalid by the specs, can be used like any other attribute in styling (e.g. attribute selector .p) in CSS or in scripting. In this case, it is probable, but by no means certain, that the attribute is meant to be used in scripting to carry a number as its value, with that number inserted with some server-side code, so that this value can be accessed in client-side scripting, as relating to a specific element.
The recommended way is to use data-* attributes instead, such as data-p, to avoid any risk of clashing with attribute names that might be introduced in some future HTML version.
The default HTML(whichever version) namespace doesn't have a purpose for "p" inside a li tag. If there's another namespace declared then that's where it's from. Other than that, it's not valid by w3 standards.
It should be a custom attribute to use in JavaScript codes to get something.
That is just a custom tag used in some javascript functions