What is the best practice when creating a one off custom html section to a page?

[pmueller88]

I'm new to the details of AEM. I work on the Marketing side of our website so I make lots of one off landing pages and campaign Hero Sections that the Authoring WYSIWYG can't handle (I can't seem to do pixel perfect with a WYSIWYG). Is it best to just create a component for the page or section that needs custom HTML, CSS, and JS? Or is there another way that is preferred?  It seems like the components will pile up pretty quickly this way. 

[arunpatidar · Accepted solution]

You can use embedded core component to copy-paste html but for js and css or you can create similar components to inject HTML/CSS/JS

https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/embed.html

[Nirmal_Jose]

You can always use HTML Markup editor mode in richtext component to paste HTML snippets. The disadvantage is that the edits on it are not a marketer change, but a developer change. But, as said, if they are one-off sections, this should suffice

[ShakilAhmed]

In AEM richtext component, you can add HTML but scripts are not allowed as soon as you save, it will remove script tags. Its due to security rules in CORS configuration that can be update not sure if it will still allow scripting tags though.

embed is an option to be considered if CSS and JS required that are not already part of your component designs.

[BrianKasingli]

@pmueller88,

I think, before jumping into creating mega component one-time-use components, we can do something better. Let's think about cutting cost, enabling reusability and flexibility. 

1. Can we break down the creative into reusable components?
2. Can a group of reusable components achieve the same outcome, based on the creative?

If we can strategically create components to shape up the marketing team's landing page, their team can be the ones who create the pages themselves, and since the marketer's components are flexible and robust, they should be able to add styles to whatever their heart contempts. 

But... if you really need to create that mega component one-time-use component, then is my suggestion:

1. Take inspiration from the AEM Core Components - Breadcrumb; the structure of this component is the way to organise your AEM Components. 
   
2. Create a component in /apps/my-project/components/*
3. Create default script.html in the component structure.
4. Create clientlib folder (with a clientCategory) in the same component structure; this will hold your CSS and JS.
5. if editable template, then you can edit the page policy to include the clientCategory.
6. if static template, then you can add the clientCategory within the customheadlibs.html andcustomfootlibs.html .
7. create new page with the template, and drag the component into the page. 
8. done!