# Combining Aurelia replaceable parts with HTML Web Components part styling

**URL:** <https://discourse.aurelia.io/t/combining-aurelia-replaceable-parts-with-html-web-components-part-styling/3720>\
**Category:** Framework Knowledge\
**Created:** [August 19, 2020, 9:10am UTC](https://discourse.aurelia.io/t/combining-aurelia-replaceable-parts-with-html-web-components-part-styling/3720 "2020-08-19T09:10:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bart/32/1878_2.png) [@Bart](https://discourse.aurelia.io/u/Bart)\
**Post date:** [August 19, 2020, 9:10am UTC](https://discourse.aurelia.io/t/combining-aurelia-replaceable-parts-with-html-web-components-part-styling/3720/1 "2020-08-19T09:10:24Z")

</div>

Lately, CSS supports styling of parts of HTML Web Components:

> **[::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)**
>
> The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.

Aurelia supports this as well, of course:

##### test-component.ts

```
import { useShadowDOM } from 'aurelia-framework';

@useShadowDOM
export class TestComponent {
}

```

##### test-component.html

```
<template>
  <require from="./test-component.css" as="scoped"></require>

  <div class="test-component-view">
    <div class="foo" part="foo">This is the <i>foo</i> section.</div>
    <div class="bar" part="bar">This is the <i>bar</i> section.</div>
  </div>
</template>

```

##### test-component.css

```
.test-component-view {
  border: 1px solid red;
}

.test-component-view > .foo {
  margin: 5px;
  padding: 5px;
  border: 1px solid green;
  background-color: lightgreen;
}

.test-component-view > .bar {
  margin: 5px;
  padding: 5px;
  border: 1px solid blue;
  background-color: lightblue;
}

```

##### app.html

```
<template>
  <require from="./test-component"></require>
  <require from="./app.css"></require>

  <test-component id="component1"></test-component>
  <test-component id="component2"></test-component>
</template>

```

##### app.css

```
/* Override the styling of the 'bar' part of the <test-component> element with id #component2 */
#component2::part(bar) {
  background-color: lightgray;
  border: 1px solid black;
}

```

I assume that we (the Aurelia developer community) should take special care when this is combined with [Aurelia’s replaceable parts](http://www.foursails.co/blog/semantic-template-parts/).

Are there perhaps any known (and not obvious) pitfalls when using and combining these technologies?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 26, 2020, 1:53pm UTC](https://discourse.aurelia.io/t/combining-aurelia-replaceable-parts-with-html-web-components-part-styling/3720/2 "2020-08-26T13:53:31Z")

</div>

There could be some issues, as `part` attribute will be compiled away by `ViewCompiler`. Maybe we should address this. Maybe we can add a `part` name configuration for view compiler, so that it look for a different attribute like `part-name` instead of `part`.