Add the doc about Component-first styling

docs/modules/Components.md

@@ -838,7 +838,17 @@ domc.addType('component-css', {
   },
 });
 ```
-
+::: tip Component-first styling
+By default, when you select a component in the canvas and apply styles on it, changes will be applied on its existent classes. This will result on changing of all the components with those applied classes. If you need the style to be applied only on the specific selected component you have to select componentFirst strategy in this way.
+```js
+grapesjs.init({
+  ...
+  selectorManager: {
+    componentFirst: true,
+  },
+})
+```
+:::
 
 
 

src/css_composer/model/CssRule.js

@@ -79,7 +79,7 @@ export default class CssRule extends Model.extend(Styleable) {
   }
 
   /**
-   * Return the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
+   * Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
    * @returns {String}
    * @example
    * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {

src/dom_components/model/Component.js

@@ -79,6 +79,7 @@ export const keyUpdateInside = `${keyUpdate}-inside`;
  * @property {Boolean} [selectable=true] Allow component to be selected when clicked. Default: `true`
  * @property {Boolean} [hoverable=true] Shows a highlight outline when hovering on the element if `true`. Default: `true`
  * @property {Boolean} [void=false] This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
+ * @property {String} [styles=''] Component related styles, eg. `.my-component-class { color: red }`
  * @property {String} [content=''] Content of the component (not escaped) which will be appended before children rendering. Default: `''`
  * @property {String} [icon=''] Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<i class="fa fa-square-o"></i>'. Default: `''`
  * @property {String|Function} [script=''] Component's javascript. More about it [here](/modules/Components-js.html). Default: `''`
@@ -1894,7 +1895,8 @@ Component.prototype.defaults = {
   status: '', // State, eg. 'selected'
   content: '',
   icon: '',
-  style: '', // Component related style
+  style: '',
+  styles: '', // Component related styles
   classes: '', // Array of classes
   script: '',
   'script-props': '',