title: Element style doesn't apply when using cdkDropList (Angluar cdk drag and drop)
body: <p>I am posting this question just to answer it myself in case anyone is struggling like I did!</p>
  <p>I'm working on an angular project to implement a Trello-like application. I want to be able to drag an element from one list to another so I installed the Angular cdk module and followed <a href="https://material.angular.io/cdk/drag-drop/overview" rel="noreferrer">their guide</a>.</p>
  <p><a href="https://i.stack.imgur.com/FF0S8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FF0S8.png" alt="enter image description here" /></a></p>
  <p><strong>NOTICE</strong>: My application is broken into several pages/components, the page were I am implementing that interface (Trello) is called <code>BoardPageComponent</code>.</p>
  <p>First I added the <code>cdkDrag</code> directive and the element became draggable which is a good start!</p>
  <p>Then I added the <code>cdkDropList</code> directive to the parent element, the children elements were still draggable BUT their style no longer works while they are dragged !</p>
  <h1>Solution</h1>
  <p>When dragging an element inside of a <code>cdkDropList</code> the <code>DragAndDropModule</code> creates a clone of that element but at the body level of the document. So if your component is encapsulated then it's style won't apply !</p>
  <p><strong>Solution 1:</strong> One quick solution would be to just move the style of that draggable element and put it in the global style file.</p>
  <p><strong>Solution 2:</strong> Another solution would be to disable the encapsulation of that component with <code>ViewEncaplusation.None</code>:</p>
  <pre><code>@Component({
    selector: 'app-board-page',
    templateUrl: './board-page.component.html',
    styleUrls: ['./board-page.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class BoardPageComponent implements OnInit, OnDestroy {
    ....
  }
  </code></pre>
  <p>This will work but you should be aware that this may leak some style to other components of your application. So make sure to encapsulate the component's style manually.</p>
  <p>Or maybe there is another way ??</p>