Docs/custom flow component cssimport (vaadin#3779)

* Clarified use of cssimport in custom Flow components

* Fixed incorrect example of applying cssimport to custom flow component

---------

Co-authored-by: edler-san <19165931+edler-san@users.noreply.github.com>

Author: rolfsmeds

articles/flow/create-ui/creating-components/extending-component.adoc

@@ -35,7 +35,7 @@ image:images/vaadin-number-field-server-side-extension.png[Number Field server s
 
 [source,java]
 ----
-@CssImport("./styles/numeric-field-styles.css")
+@CssImport(value = "./styles/numeric-field-styles.css")
 public class NumericField extends TextField {
 
     private Button substractBtn;
@@ -81,19 +81,16 @@ public class NumericField extends TextField {
                     incrementValue);
         });
 
-        getElement().setAttribute("theme", "numeric");
+        addClassName("numeric");
         styleBtns();
 
         addToPrefix(substractBtn);
         addToSuffix(addBtn);
     }
 
     private void styleBtns() {
-        // Note: The same as addThemeVariants
-        substractBtn.getElement()
-                .setAttribute("theme", "icon");
-        addBtn.getElement()
-                .setAttribute("theme", "icon");
+        substractBtn.addThemeName("icon");
+        addBtn.addThemeName("icon");
     }
 
     public void setNumericValue(int value) {
@@ -115,20 +112,20 @@ Every component has a [methodname]`getElement()` method that allows you to acces
 See <<many-elements#,Creating a Component Using Multiple Elements>> for more.
 
 Import additional styles for the component using the `@CssImport` annotation.
-These styles apply only to the `NumericField` component, and not to all `TextField` components.
+Note that CSS selectors (based on the `numeric` classname applied to the component) must be used to scope the styles to this component.
 
-*Example*: Creating [filename]`numeric-field-styles.css` to customize the appearance of the `vaadin-text-field` component.
+*Example*: Creating [filename]`numeric-field-styles.css` to customize the appearance of the custom `vaadin-text-field` component.
 
 .`styles/numeric-field-styles.css`
 [source,css]
 ----
-:host([theme~="numeric"]) [part="input-field"] {
+vaadin-text-field.numeric::part(input-field) {
     background-color: var(--lumo-base-color);
     border: 1px solid var(--lumo-contrast-30pct);
     box-sizing: border-box;
 }
 
-:host([theme~="numeric"]) [part="value"]{
+vaadin-text-field.numeric::part(value) {
     text-align: center;
 }
 ----

articles/styling/legacy/css-import.adoc

@@ -17,4 +17,6 @@ public class MyUI extends Div {
 }
 ----
 
-Although this mechanism still works, the <<../application-theme#, application theme folder>> is now the recommended approach for loading application styles. It also supports <<../advanced/shadow-dom-styling#, injection of Shadow DOM styles>> into Vaadin components through the `components` sub-folder. `@CssImport` is still useful for loading stylesheets into custom standalone components, however.
+Although this mechanism still works, the <<../application-theme#, application theme folder>> is now the recommended primary approach for loading application styles. It also supports <<../advanced/shadow-dom-styling#, injection of Shadow DOM styles>> into Vaadin components through the `components` sub-folder.
+
+`@CssImport` is still a valid mechanism for loading stylesheets into <<{articles}/flow/create-ui/creating-components#, custom Flow-based components>>, in cases where these need to be separate from the application theme.