Share:

Introduction Of Web Components | Web Components | Amit Padhiyar (Saatody)

Web Components are set of features or suite of different technologies that allowing to create, encapsulation and interoperability of reusable HTML custom elements. There are main three technologies to create Web Components.
  1. Custom Elements
  2. Shadow DOM
  3. HTML Templates

Custom Elements

  • A set of JavaScript APIs that allow you to define custom elements and their behaviour.
  • There are two parts to Custom Elements: autonomous custom elements and customized built-in elements.
  • Autonomous custom elements are HTML elements that are entirely separated from native HTML elements; they are essentially built from the bottom up using the Custom Elements API.
  • Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality.

Shadow DOM

  • A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element.
  • And shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into the main document DOM tree.
  • Or it is rendered separately from the main document DOM and controlling associated functionality.
  • In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
  • The developer cannot access the Shadow DOM in the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements.
  • The scoped subtree in an element is called a shadow tree. The element the shadow tree is attached to is called a shadow host.

HTML Templates

  • The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
  • HTML Templates are supported in Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera.

Comments

Post a Comment

Popular posts from this blog

Get Color From Pixel C# WPF | Saatody | Amit Padhiyar

Image
Today I will show you, How to get pixel color from particular UIElement. Here we need two main class(es). RenderTargetBitmap and CroppedBitmap. MainWindow.xaml <Window x:Class="Pixel.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Pixel" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="300"/> <RowDefinition Height="30"/> <RowDefinition Height="30"/> </Grid.RowDefinitions> <Border Name="Pi
Read more

Basic Audio Operations With MP3 And Wave Files Using NAudio C#

In this post, I will discuss about DirectSoundOut, AudioFileReader, Mp3FileReader and WaveFileReader class(es) and its methods. Also, discuss about open, initilize, play, pause, stop and dispose the audio file. Of course! These are basic operations of audio file. The DirectSoundOut Class The DirectSoundOut class can initilize, play, pause, stop, dispose the audio files. It is alternate option of WaveOut and WaveOutEvent. See list of methods of DirectSoundOut class. Init() Play() Pause() Stop() Dispose() The AudioFileReader, Mp3FileReader and WaveFileReader Classes The AudioFileReader class can automatically decide if file is wave or mp4. When the WaveFileReader and Mp3FileReader can't. If you try to open wave file using Mp3FileReader then it will give you exception "System.FormatException: 'Not a WAVE file - no RIFF header'". And same, If you try to open mp3 file using WaveFileReader then it will give you exception "System.IO.InvalidDataEx
Read more

Create Drag And Drop Operation Between DevExpress GridControl And Custom WPF UI | Saatody | Amit Padhiyar

 Today i will create Drag And Drop Operation. Actually, DevExpress GridControl support Drag and Drop in Views (TreeListView, TabelView, and CardView). But I am trying to drag GridControl row and drop on my custom UI. Here I will write about Drag and Drop with two clipboard operations. Drag Copy And Drop Drag Cut And Drop First set these two properties on GridControl And View (TreeListView, CardView, TableView). GridControl.AllowDrop = true; GridView.AllowDragDrop = true; GridView.AllowDrop = true; GridView.ShowDragDropHint = false; Due to ShowDragDropHint false, The hint will be disable and only cursor will change during DnD (Drag and Drop). First we create Drag Copy And Drop it is too simple to create drag and drop with copy data or element. We just prevent drag leave events using e.Handled = true. GridControl side coding GridControl.AllowDrop = true; GridView.AllowDragDrop = true; GridView.AllowDrop = true; GridView.ShowDragDropHint = false; GridView.StartRecordDrag += (sender, e) =
Read more