# Better know a framework #18: what processContent is and what it is used for

**URL:** <https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785>\
**Category:** Framework Knowledge\
**Created:** [October 20, 2018, 1:19am UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785 "2018-10-20T01:19:11Z")\
**Posts on this page:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![EisenbergEffect](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/eisenbergeffect/32/2655_2.png) [@EisenbergEffect](https://discourse.aurelia.io/u/EisenbergEffect)\
**Post date:** [January 24, 2019, 12:43am UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/21 "2019-01-24T00:43:22Z")

</div>

I think we’d want to add a section to this document specifically: [https://github.com/aurelia/documentation/blob/master/current/en-us/5.%20templating/4.%20custom-elements.md](https://github.com/aurelia/documentation/blob/master/current/en-us/5.%20templating/4.%20custom-elements.md)

You can see that there’s a section at the bottom that lists out all the decorators. `@processContent` is there but it’s clearly not enough information to be really useful. We could start by just expanding this section. The docs are mostly vanilla markdown. @Sayan751 If you want to make a PR to that document in the repo, I can work with you to get it in and published. Also, feel free to expand out any other sections of any of the docs. You’ll find that in that `current` folder all the site’s documentation is arranged the same as it is in the site ToC. Let me know if there’s any other way I can help!

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [January 24, 2019, 7:24am UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/22 "2019-01-24T07:24:38Z")

</div>

My idea is to present some examples to showcase the utility of these decorators and detail succinctly. It will be difficult to have an example for all of these, so I intend to focus majorly on `processContent`.  
Also I intend to embed some codesandbox, so that readers can easily play with that. However, I think it would be better if the Aurelia core team inherits those sandboxes (a link from official Aurelia team looks more trustworthy).  
Anyway, I have already started with this (WIP). You can check it here: [https://github.com/Sayan751/documentation/commit/7753c33d04b606046302465a40d6589837bb05c6](https://github.com/Sayan751/documentation/commit/7753c33d04b606046302465a40d6589837bb05c6)

---

<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:** [January 26, 2019, 1:50pm UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/23 "2019-01-26T13:50:20Z")

</div>

If anyone interested, the PR is here [https://github.com/aurelia/documentation/pull/381](https://github.com/aurelia/documentation/pull/381). It’s an awesome doc work. Hopefully our folks can collaborate more to have fun like this for Aurelia doc 🚀

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 18, 2019, 2:29am UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/24 "2019-03-18T02:29:38Z")

</div>

Is there another customise point where I can touch the original html template itself?

For example, I have a `my-field.js` with `my-field.html` like this

```auto
<template>
  <input auto-complete="off">
</template>

```

I want a pre-processor at runtime to modify the html template **only for chrome**

```auto
<template>
  <input auto-complete="new-password">
</template>

```

Right now, I am able to it verbosely like this:

```auto
@useView(window.chrome ? 
  PLATFORM.moduleName('./my-field.chrome.html') :
  LATFORM.moduleName('./my-field.html'))
export class MyField {

```

---

<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:** [March 18, 2019, 9:11am UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/25 "2019-03-18T09:11:31Z")

</div>

Did you try:

```auto
@processContent(el => {
  el
    .querySelectorAll('[auto-complete]')
    .forEach(input => input.setAttribute(window.chrome ? 'new-password' : 'off'));
  return true;
})

```

Edit:

I see that you want to touch the custom element template, then you can use `beforeCompile` hook as in this example [https://codesandbox.io/s/1zjmrqlxl](https://codesandbox.io/s/1zjmrqlxl)

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 18, 2019, 9:16pm UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/26 "2019-03-18T21:16:31Z")

</div>

Thx, is this considered an undocumented public API?

---

<div class="post-metadata">

**Author:** ![jsobell](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jsobell/32/87_2.png) [@jsobell](https://discourse.aurelia.io/u/jsobell)\
**Post date:** [March 18, 2019, 11:40pm UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/27 "2019-03-18T23:40:10Z")

</div>

I think it might best be described as “microscopically documented” 🙂  
[https://aurelia.io/docs/api/templating/interface/ViewEngineHooks/property/beforeCompile](https://aurelia.io/docs/api/templating/interface/ViewEngineHooks/property/beforeCompile)

---

<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:** [March 19, 2019, 12:27am UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/28 "2019-03-19T00:27:54Z")

</div>

Yes it’s documented as per @jsobell 😄

---

<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:** [March 19, 2019, 1:02am UTC](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785/29 "2019-03-19T01:02:54Z")

</div>

I’ll be writing something for it soon. Or if someone wants to help and give it ago

[Previous page](https://discourse.aurelia.io/t/better-know-a-framework-18-what-processcontent-is-and-what-it-is-used-for/1785.md?page=1)