“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Since you’re learning about Web Components, you need to review properties and attributes. These two attributes are obviously different, and should be noticed when writing native. In the Web Components framework, they are also strictly separated, but we rarely pay attention to them.

Property and attribute can both be translated as attributes, and sometimes attributes are translated as attributes, but they are not the same thing. These correspond to jQuery’s prop() and attr() methods, respectively.

attribute

<input type="text" id="input" />
Copy the code

Attribute is an attribute declared on an HTML tag. For example, has two attributes, type and ID.

Attribute can only be a string. If an object is passed in, the attribute is changed to object object. And case insensitive.

You can access attributes through the JS getAttribute() and setAttribute() methods. You can get defined attributes through the Attributes attribute.

property

Property is a property on a DOM object.

<input type="text" id="input" />

<script>
document.querySelector('#input').type // text
</script>
Copy the code

It can be accessed directly through the properties of the DOM object.

Relationship between property and attribute

1. Property synchronizes the attribute value.

Attribute can be thought of as an initialization of a property. Attributes can use custom attributes, but property does not synchronize these attributes (which can be found on Attributes). If you give an attribute value that is outside the specification, such as , the property will not synchronize these values and will be set to the default, providing a corrective effect.

Attribute maps to the property of the same name and has the effect of “binding.”

This cannot be reversed, that is, modifying the property does not change the attribute.

2. The page is updated regardless of property or attribute changes.

3. In some cases, attributes can also synchronize property values, such as ID and href.

4. Attribute and property names do not correspond one to one. There are some special cases. Such asclass -> className.

Properties and attributes in Vue

There are two cases in which values are passed to elements through the DOM in Vue.

One is to pass values to the Vue component. In this case, all passed are component props. Has little to do with properties and attributes.

<article title="Article title" />
Copy the code

The second is to pass values to native HTML elements, including Web Components. This is written directly to the template, hence the attribute. However, Vue provides a way to pass properties to native elements.

<! -- attribute -->
<input type="text" />

<! -- property -->
<input :type.prop="'text'">
Copy the code

Therefore, if you use Web Components in Vue to pass values to Components, you need to pay attention to parameter names that are case-insensitive and cannot be written in a format other than string. The Web Components should also design attribute parameter names as small humps. If you pass property, use v-bind. Prop. Another case to note is that if the Attribute name of the Web Components is a key of the Vue (for example, key), it will not pass successfully. Instead, it should be designed as a property and passed via V-bind.prop.

React properties and attributes

Similar to Vue, there is no way to bind property directly from the JSX template. Property can be modified by ref. So when you use React Web Components, you wrap the Web Components as React Components and pass the Attribute as a property to React. CreateElement.

Another difference is that React is case-sensitive to attributes, which makes it easy to convert attributes to properties.