feat(field,textfield): add container slot for custom background content

PiperOrigin-RevId: 673060991

Author: material-web-copybara

field/internal/_shared.scss

@@ -72,6 +72,17 @@
     pointer-events: none;
   }
 
+  slot[name='container'] {
+    border-radius: inherit;
+  }
+
+  slot[name='container']::slotted(*) {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
   @include content.styles;
   @include label.styles;
   @include supporting-text.styles;

field/internal/field.ts

@@ -132,7 +132,9 @@ export class Field extends LitElement {
     return html`
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
-          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}
+          ${this.renderBackground?.()}
+          <slot name="container"></slot>
+          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${outline}
           <div class="container">
             <div class="start">
               <slot name="start"></slot>
@@ -181,6 +183,7 @@ export class Field extends LitElement {
   }
 
   protected renderBackground?(): TemplateResult;
+  protected renderStateLayer?(): TemplateResult;
   protected renderIndicator?(): TemplateResult;
   protected renderOutline?(floatingLabel: unknown): TemplateResult;
 

field/internal/filled-field.ts

@@ -13,10 +13,11 @@ import {Field} from './field.js';
  */
 export class FilledField extends Field {
   protected override renderBackground() {
-    return html`
-      <div class="background"></div>
-      <div class="state-layer"></div>
-    `;
+    return html` <div class="background"></div> `;
+  }
+
+  protected override renderStateLayer() {
+    return html` <div class="state-layer"></div> `;
   }
 
   protected override renderIndicator() {

textfield/internal/_shared.scss

@@ -44,6 +44,10 @@
     resize: inherit;
   }
 
+  slot[name='container'] {
+    border-radius: inherit;
+  }
+
   @include icon.styles;
   @include input.styles;
 }

textfield/internal/text-field.ts

@@ -569,6 +569,7 @@ export abstract class TextField extends textFieldBaseClass {
       ${this.renderInputOrTextarea()}
       ${this.renderTrailingIcon()}
       <div id="description" slot="aria-describedby"></div>
+      <slot name="container" slot="container"></slot>
     </${this.fieldTag}>`;
   }