diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index 9afec8af1..5f5e56412 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -252,15 +252,7 @@ export const Editable = (props: EditableProps) => {
   // to the real event sadly. (2019/11/01)
   // https://github.com/facebook/react/issues/11211
   const onDOMBeforeInput = useCallback(
-    (
-      event: Event & {
-        data: string | null
-        dataTransfer: DataTransfer | null
-        getTargetRanges(): DOMStaticRange[]
-        inputType: string
-        isComposing: boolean
-      }
-    ) => {
+    (event: InputEvent) => {
       if (
         !readOnly &&
         hasEditableTarget(editor, event.target) &&
@@ -268,7 +260,7 @@ export const Editable = (props: EditableProps) => {
       ) {
         const { selection } = editor
         const { inputType: type } = event
-        const data = event.dataTransfer || event.data || undefined
+        const data = (event as any).dataTransfer || event.data || undefined
 
         // These two types occur while a user is composing text and can't be
         // cancelled. Let them through and wait for the composition to end.
@@ -285,7 +277,7 @@ export const Editable = (props: EditableProps) => {
         // to change the selection because it is the range that will be deleted,
         // and those commands determine that for themselves.
         if (!type.startsWith('delete') || type.startsWith('deleteBy')) {
-          const [targetRange] = event.getTargetRanges()
+          const [targetRange] = (event as any).getTargetRanges()
 
           if (targetRange) {
             const range = ReactEditor.toSlateRange(editor, targetRange)
@@ -304,7 +296,7 @@ export const Editable = (props: EditableProps) => {
           type.startsWith('delete')
         ) {
           const direction = type.endsWith('Backward') ? 'backward' : 'forward'
-          Editor.deleteFragment(editor, direction)
+          Editor.deleteFragment(editor, { direction })
           return
         }
 
@@ -949,7 +941,7 @@ export const Editable = (props: EditableProps) => {
                     event.preventDefault()
 
                     if (selection && Range.isExpanded(selection)) {
-                      Editor.deleteFragment(editor, 'backward')
+                      Editor.deleteFragment(editor, { direction: 'backward' })
                     } else {
                       Editor.deleteBackward(editor)
                     }
@@ -961,7 +953,7 @@ export const Editable = (props: EditableProps) => {
                     event.preventDefault()
 
                     if (selection && Range.isExpanded(selection)) {
-                      Editor.deleteFragment(editor, 'forward')
+                      Editor.deleteFragment(editor, { direction: 'forward' })
                     } else {
                       Editor.deleteForward(editor)
                     }
@@ -973,7 +965,7 @@ export const Editable = (props: EditableProps) => {
                     event.preventDefault()
 
                     if (selection && Range.isExpanded(selection)) {
-                      Editor.deleteFragment(editor, 'backward')
+                      Editor.deleteFragment(editor, { direction: 'backward' })
                     } else {
                       Editor.deleteBackward(editor, { unit: 'line' })
                     }
@@ -985,7 +977,7 @@ export const Editable = (props: EditableProps) => {
                     event.preventDefault()
 
                     if (selection && Range.isExpanded(selection)) {
-                      Editor.deleteFragment(editor, 'forward')
+                      Editor.deleteFragment(editor, { direction: 'forward' })
                     } else {
                       Editor.deleteForward(editor, { unit: 'line' })
                     }
@@ -997,7 +989,7 @@ export const Editable = (props: EditableProps) => {
                     event.preventDefault()
 
                     if (selection && Range.isExpanded(selection)) {
-                      Editor.deleteFragment(editor, 'backward')
+                      Editor.deleteFragment(editor, { direction: 'backward' })
                     } else {
                       Editor.deleteBackward(editor, { unit: 'word' })
                     }
@@ -1009,7 +1001,7 @@ export const Editable = (props: EditableProps) => {
                     event.preventDefault()
 
                     if (selection && Range.isExpanded(selection)) {
-                      Editor.deleteFragment(editor, 'forward')
+                      Editor.deleteFragment(editor, { direction: 'forward' })
                     } else {
                       Editor.deleteForward(editor, { unit: 'word' })
                     }
@@ -1140,7 +1132,10 @@ const isEventHandled = <
  * Check if a DOM event is overrided by a handler.
  */
 
-const isDOMEventHandled = (event: Event, handler?: (event: Event) => void) => {
+const isDOMEventHandled = <E extends Event>(
+  event: E,
+  handler?: (event: E) => void
+) => {
   if (!handler) {
     return false
   }
diff --git a/packages/slate-react/src/components/element.tsx b/packages/slate-react/src/components/element.tsx
index b51279f11..0c68fd2bb 100644
--- a/packages/slate-react/src/components/element.tsx
+++ b/packages/slate-react/src/components/element.tsx
@@ -40,8 +40,7 @@ const Element = (props: {
   const readOnly = useReadOnly()
   const isInline = editor.isInline(element)
   const key = ReactEditor.findKey(editor, element)
-
-  let children: JSX.Element | null = useChildren({
+  let children: React.ReactNode = useChildren({
     decorations,
     node: element,
     renderElement,
diff --git a/packages/slate-react/src/hooks/use-isomorphic-layout-effect.ts b/packages/slate-react/src/hooks/use-isomorphic-layout-effect.ts
index 14671c12b..67304ea68 100644
--- a/packages/slate-react/src/hooks/use-isomorphic-layout-effect.ts
+++ b/packages/slate-react/src/hooks/use-isomorphic-layout-effect.ts
@@ -4,6 +4,7 @@ import { CAN_USE_DOM } from '../utils/environment'
 /**
  * Prevent warning on SSR by falling back to useEffect when DOM isn't available
  */
+
 export const useIsomorphicLayoutEffect = CAN_USE_DOM
   ? useLayoutEffect
   : useEffect
diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts
index 54592c496..915e58ce8 100644
--- a/packages/slate-react/src/plugin/react-editor.ts
+++ b/packages/slate-react/src/plugin/react-editor.ts
@@ -22,6 +22,7 @@ import {
   isDOMElement,
   isDOMSelection,
   normalizeDOMPoint,
+  hasShadowRoot,
 } from '../utils/dom'
 import { IS_CHROME } from '../utils/environment'
 
diff --git a/packages/slate/src/interfaces/editor.ts b/packages/slate/src/interfaces/editor.ts
index 54494a8ea..c5f9a0afd 100755
--- a/packages/slate/src/interfaces/editor.ts
+++ b/packages/slate/src/interfaces/editor.ts
@@ -106,13 +106,19 @@ export interface EditorInterface {
       unit?: 'character' | 'word' | 'line' | 'block'
     }
   ) => void
-  deleteFragment: (editor: Editor) => void
+  deleteFragment: (
+    editor: Editor,
+    options?: {
+      direction?: 'forward' | 'backward'
+    }
+  ) => void
   edges: (editor: Editor, at: Location) => [Point, Point]
   end: (editor: Editor, at: Location) => Point
   first: (editor: Editor, at: Location) => NodeEntry
   fragment: (editor: Editor, at: Location) => Descendant[]
   hasBlocks: (editor: Editor, element: Element) => boolean
   hasInlines: (editor: Editor, element: Element) => boolean
+  hasPath: (editor: Editor, path: Path) => boolean
   hasTexts: (editor: Editor, element: Element) => boolean
   insertBreak: (editor: Editor) => void
   insertFragment: (editor: Editor, fragment: Node[]) => void
@@ -435,7 +441,13 @@ export const Editor: EditorInterface = {
    * Delete the content in the current selection.
    */
 
-  deleteFragment(editor: Editor, direction?: 'forward' | 'backward'): void {
+  deleteFragment(
+    editor: Editor,
+    options: {
+      direction?: 'forward' | 'backward'
+    } = {}
+  ): void {
+    const { direction = 'forward' } = options
     editor.deleteFragment(direction)
   },